javascript - Attaching angularjs controller via directive is not assigning class="ng-scope" - Stack Overflow

admin管理员组

文章数量:1328950

I am new to angular so apologies if I am missing a simple concept here. I have developed my application using a lot of directives to put in sections of my site. They have a template and a controller and I am assigning the controller inside of the direct. I intend to use these bits on other places on the site

 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <ng-blah-logo></ng-blah-logo>
        </div>
        <div class="navbar-collapse collapse">
            <ng-blah-login></ng-blah-login>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

<ng-blah-marketplace-form></ng-blah-marketplace-form>

The JS is (what I thought was) pretty straight forward:

var ngBlahMarketplaceFormCtrl = function($scope) {
    console.log($scope)

    $scope.form.name = ''
    $scope.form.phone = ''
    $scope.form.firm = ''
    $scope.form.brief = ''


    $scope.submit = function(){
        console.log('ngBlahMarketPlaceFormCtrl::submit()')
        console.log($scope.form)
    }
}

app.directive('ngBlahMarketplaceForm', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , templateUrl: '/resources/ngViews/marketplaceForm.html'
        , controller: 'ngBlahMarketplaceFormCtrl'
    };
});

var ngBlahLoginCtrl = function($scope) {
    console.log($scope)

    $scope.default = {}
    $scope.default.username = 'username' ;
    $scope.default.password = 'password';

    $scope.form = _.clone($scope.default) ;

    $scope.submit = function() {
        console.log('ngBlahLoginCtrl::submit()')
    }
    $scope.help = function() {
        console.log('ngBlahLoginCtrl::help()')
    }
}


// login form and the controller to logic
app.directive('ngBlahLogin', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , controller: 'ngBlahLoginCtrl'
        , templateUrl: '/resources/ngViews/loginThin.html'

    };
});

OK so the issue I have is that only one scope is being created. When I investigate the DOM the only element with a class="ng-scope" is the Body tag. What have I done to get this behavior? Do I need to post more code to assist in getting to the bottom of this?

Thank you in advance!

Edit: js fiddle: / Inside of the JS Fiddle you can see two logs to the console inside of two different controller. Both times it logs the scope variable, and in both cases the scope.id are the same

Edit: clarifying the problem, which is that my two controllers share the same $scope variable. The page "renders" (the HTML) as expected. For some reason the only element with a class="ng-scpoe" attribute is the body tag (which contains the ng-app attribute as well).

Thanks again

I am new to angular so apologies if I am missing a simple concept here. I have developed my application using a lot of directives to put in sections of my site. They have a template and a controller and I am assigning the controller inside of the direct. I intend to use these bits on other places on the site

 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <ng-blah-logo></ng-blah-logo>
        </div>
        <div class="navbar-collapse collapse">
            <ng-blah-login></ng-blah-login>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

<ng-blah-marketplace-form></ng-blah-marketplace-form>

The JS is (what I thought was) pretty straight forward:

var ngBlahMarketplaceFormCtrl = function($scope) {
    console.log($scope)

    $scope.form.name = ''
    $scope.form.phone = ''
    $scope.form.firm = ''
    $scope.form.brief = ''


    $scope.submit = function(){
        console.log('ngBlahMarketPlaceFormCtrl::submit()')
        console.log($scope.form)
    }
}

app.directive('ngBlahMarketplaceForm', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , templateUrl: '/resources/ngViews/marketplaceForm.html'
        , controller: 'ngBlahMarketplaceFormCtrl'
    };
});

var ngBlahLoginCtrl = function($scope) {
    console.log($scope)

    $scope.default = {}
    $scope.default.username = 'username' ;
    $scope.default.password = 'password';

    $scope.form = _.clone($scope.default) ;

    $scope.submit = function() {
        console.log('ngBlahLoginCtrl::submit()')
    }
    $scope.help = function() {
        console.log('ngBlahLoginCtrl::help()')
    }
}


// login form and the controller to logic
app.directive('ngBlahLogin', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , controller: 'ngBlahLoginCtrl'
        , templateUrl: '/resources/ngViews/loginThin.html'

    };
});

OK so the issue I have is that only one scope is being created. When I investigate the DOM the only element with a class="ng-scope" is the Body tag. What have I done to get this behavior? Do I need to post more code to assist in getting to the bottom of this?

Thank you in advance!

Edit: js fiddle: http://jsfiddle/U5UxX/ Inside of the JS Fiddle you can see two logs to the console inside of two different controller. Both times it logs the scope variable, and in both cases the scope.id are the same

Edit: clarifying the problem, which is that my two controllers share the same $scope variable. The page "renders" (the HTML) as expected. For some reason the only element with a class="ng-scpoe" attribute is the body tag (which contains the ng-app attribute as well).

Thanks again

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Sep 23, 2013 at 21:43 akaphenom asked Sep 23, 2013 at 17:44 akaphenomakaphenom 6,8961111 gold badges6060 silver badges112112 bronze badges 2

• please post Fiddle or Plunker to help us to detect the issue. Thanks – Maxim Shoustin Commented Sep 23, 2013 at 17:55
• fiddle it is: jsfiddle/U5UxX – akaphenom Commented Sep 23, 2013 at 20:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

This is working example based on your code.

added to directive scope:true

scope:true will create a child scope that will "prototypically" inherit from its parent, so you will be able to access values defined on parent's scope in your directive.

var fessmodule = angular.module('myModule', ['ui.bootstrap']);

fessmodule.controller('ngMarketplaceFormCtrl', function($scope) {
console.log($scope)

$scope.name = ''
$scope.phone = ''
$scope.firm = ''
$scope.brief = ''


 $scope.submit = function () {
    console.log('ngMarketPlaceFormCtrl::submit()')
    console.log($scope.form)
 }
});

fessmodule.directive('ngMarketplaceForm', function () {
return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    controller: 'ngMarketplaceFormCtrl',
    template: '<div class="well marketplaceWell">\
                        <div style="margin-left: 15px">\
                            <div class="form-group row">Start a RFP</div>\
                            <div class="form-group row"><input type="text" placeholder="name" class="col-md-9" ng-model="name"/></div>\
                            <div class="form-group row"><input type="text" placeholder="firm" class="col-md-9" ng-model="firm"/></div>\
                            <div class="form-group row"><input type="text" placeholder="phone number" class="col-md-9" ng-model="phone"/></div>\
                            <div class="form-group row"><textarea type="text" placeholder="proposal brief" class="col-md-9" ng-model="brief"></textarea>\
                            </div>\
                            <div class="form-group row">\
                                <button class="btn btn-default" ng-click="submit()">Submit</button>\
                            </div>\
                        </div>\
                    </div>'
   };
});


fessmodule.controller('ngLoginCtrl', function($scope) {
console.log($scope)

$scope.
default = {}
$scope.
default.username = 'username';
$scope.
default.password = 'password';

$scope.form = _.clone($scope.
default);

$scope.submit = function () {
    console.log('ngLoginCtrl::submit()')
}
$scope.help = function () {
    console.log('ngLoginCtrl::help()')
 }
});


// login form and the controller to logic
fessmodule.directive('ngLogin', function () {
return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    controller: 'ngLoginCtrl',
    template: '<div class="pull-left">\
                        <div class="login-form">\
                            <input type="text" id="username" ng-model="form.username" no-ng-dodilio-smart-default />\
                            <input type="password" id="password" ng-model="form.password" no-ng-dodilio-smart-default />\
                            <button class="btn btn-xs btn-primary" ng-click="submit()">SIGN IN</button>\
                            <button class="btn btn-xs btn-primary" ng-click="help()">?</button>\
                        </div >\
                    </div>'

   };
});

console:

a {$id: "003", this: a, $$listeners: Object, $parent: e, $$childTail: null…}
a {$id: "004", this: a, $$listeners: Object, $parent: e, $$childTail: null…}

Fiddle

Hope it will help you,

本文标签： javascriptAttaching angularjs controller via directive is not assigning classquotngscopequotStack Overflow