[英]AngularJS: Two-way data binding not finding model in Controller
directive
which could be used at multiple places. directive
。 budgetCategories
. budgetCategories
。 My Controller
looks like 我的
Controller
看起来像
function BudgetController($scope, Budget, Category) {
$scope.budgetCategories = [];
}
and Directive
looks like 和
Directive
看起来像
angular.module('categoryListingDirective', []).directive('categoryListing', function (Category) {
return {
restrict: 'A',
replace: true,
require: true,
scope: {
budgetCategories: '='
},
templateUrl: '../static/partials/categoryListingForm.html',
link: function (scope, element, attrs) {
scope.recurring = true;
scope.allParentCategories = undefined;
scope.categories = Category.query(function () {
scope.allParentCategories = _.uniq(scope.categories, function (category) {
return category.parent;
});
console.log('all parent categories:', scope.allParentCategories);
});
scope.subCategories = function (parentCategoryName) {
return _.filter(scope.categories, function (category) {
return category.parent == parentCategoryName;
});
};
scope.addBudgetCategory = function () {
console.log('adding budgetCategory:', scope.amount);
scope.budgetCategories.push({
'amount': scope.amount,
'category': scope.subCategory ? scope.subCategory.name : '',
'parent_category': scope.parentCategory.parent,
'recurring': scope.recurring
});
};
}
}
});
I want to make sure that budgetCategories
from Controller
is used by directive. 我想确保指令使用
Controller
budgetCategories
。
When I do this I get error as 当我这样做时,我得到错误
TypeError: Cannot read property 'push' of undefined
at Scope.scope.addBudgetCategory (http://localhost:5000/static/app/js/directives/categoryListing.js:28:39)
at http://localhost:5000/static/app/lib/angular/angular.js:10672:29
at http://localhost:5000/static/app/lib/angular/angular.js:18763:37
at Scope.$eval (http://localhost:5000/static/app/lib/angular/angular.js:12533:44)
at Scope.$apply (http://localhost:5000/static/app/lib/angular/angular.js:12631:41)
at HTMLButtonElement.<anonymous> (http://localhost:5000/static/app/lib/angular/angular.js:18762:39)
at HTMLButtonElement.x.event.dispatch (http://localhost:5000/static/app/lib/others/jquery-2.0.0.min.js:1321:108)
at HTMLButtonElement.y.handle (http://localhost:5000/static/app/lib/others/jquery-2.0.0.min.js:1255:106)
Question 题
budgetCatgories
from Controller
is used by my Directive
Directive
使用Controller
budgetCatgories
Thank you 谢谢
UPDATE 更新
The html
looks like 的
html
看起来像
<div class="budgetEdit" category-listing="budget">
</div>
This line... 这条线...
scope: {
budgetCategories: '='
},
Creates an isolate scope for the directive, so its scope does not inherit from the parent scope and therefore has no access to budgetCategories
. 为指令创建一个隔离范围,因此其范围不会继承自父范围,因此无法访问
budgetCategories
。 You have a few options... 您有几种选择...
1) Don't create an isolate scope by removing the scope: { ... }
line from the directive definition. 1)不要通过从指令定义中删除
scope: { ... }
行来创建隔离范围。
2 ) Pass budgetCategories
into the directive... 2)将
budgetCategories
传递到指令中...
<div class="budgetEdit" category-listing="budget" budget-categories="budgetCategories"></div>
3) Use $parent
to access the parent scope... 3)使用
$parent
访问父范围...
scope.$parent.budgetCategories.push({
'amount': scope.amount,
'category': scope.subCategory ? scope.subCategory.name : '',
'parent_category': scope.parentCategory.parent,
'recurring': scope.recurring
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.