admin管理员组文章数量:1332108
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
Share Improve this question edited Sep 23, 2013 at 21:43 akaphenom asked Sep 23, 2013 at 17:44 akaphenomakaphenom 6,89611 gold badges60 silver badges112 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
1 Answer
Reset to default 2This 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,
版权声明:本文标题:javascript - Attaching angularjs controller via directive is not assigning class="ng-scope" - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742274141a2444871.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论