Angular指令無法識別屬性
[英]Angular directive not recognizing attribute
問題描述
這是html：
<body ng-app="myCatApp">
<div ng-controller="catagoryController">
<add-remove-lister list="catagories"></add-remove-lister>
</div>
</body>
這是JS：
app.controller('catagoryController', ['catagoryList', '$scope', function(catagoryList, $scope) {
$scope.catagories = catagoryList.catagoryList;
}]);
app.directive('addRemoveLister', [function () {
return {
scope: {
list: '='
},
template: function(tElement, tAttrs, scope) {
templateHTML = '<ul>';
var list = scope.list;
for (o = 0; o < list.length; o++) {
var curObject = scope.list[o];
templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
for (var prop in curObject) {
if (curObject.hasOwnProperty(prop) && prop.constructor === Array) {
templateHTML += '<add-remove-lister list="listItem.'+ prop +'"></add-remove-lister>';
}
}
templateHTML += '</li>';
}
templateHTML += '<ul>';
return templateHTML;
}
}
}]);
該代碼無法正常工作。 當我在指令中設置斷點時，我可以看到列表只是字符串“ catagories”。 我希望它是控制器范圍內的category對象...
讓我進一步說明一下我要做什么：
我正在嘗試建立一個指令，該指令將采用任何數組並從中產生一個列表。 假設如下：1）數組中的所有元素都是至少具有屬性{text：'text'，userSelected：'bool'}的對象
當指令在列表中遇到一個對象，該對象具有一個本身就是數組的屬性（也假定它包含具有上述兩個屬性的對象）時，它需要在該數組上遞歸調用自身。
該指令還需要在每個列表項旁邊顯示按鈕，以允許用戶更改對象上的userSelected屬性（從而將其添加到用戶的“選項”中）
2 個解決方案
解決方案1
1 已采納 2015-02-11 04:48:41
嘗試此作為模板功能
template: function(tElement, tAttrs, scope) {
templateHTML = '<ul>';
templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
templateHTML += '<add-remove-lister ng-repeat="(key, val) in listItem" ng-if="val.length" list="val"></add-remove-lister>';
templateHTML += '</li>';
templateHTML += '<ul>';
return templateHTML;
}
請注意，您可能只需要一個模板就可以完成上述操作，實際上並不需要模板功能。
使用模板功能的主要原因是允許您修改原始HTML的DOM，或從原始元素中提取節來進行手動包含。
此外，我在指令中已經看到了一些問題（必須在指令的作用域中定義在模板中引用的函數，並且由於使用的是隔離作用域，因此無法在父作用域中引用函數您還必須將這些方法作為指令的屬性傳入，或使用其他某種機制來添加或刪除元素。
這是一個工作伙伴 。
解決方案2
0 2015-02-11 04:19:42
您可以通過以下方式訪問列表
app.directive('addRemoveLister', [function () {
return {
restrict: 'E',
scope: {
list: '='
},
template: "test {{list}}",
link: function (scope, element, attrs) {
console.log(scope.list);
},
controller: function (scope) {
console.log(scope.list);
}
}
});
或者，您可以在鏈接階段編譯動態模板
app.directive('addRemoveLister', function ($compile) {
var getTemplate = function(list) {
var templateHTML = '<ul>';
for (o = 0; o < list.length; o++) {
var curObject = scope.list[o];
templateHTML +='<li ng-repeat="listItem in list"><button type="button" ng-hide="listItem.userSelected" ng-click="addToList()">Add</button>';
templateHTML +='<button type="button" ng-hide="listItem.userSelected" ng-click="removeFromList()">Remove</button>{{listItem.text}}';
for (var prop in curObject) {
if (curObject.hasOwnProperty(prop) && prop.constructor === Array) {
templateHTML += '<add-remove-lister list="listItem.'+ prop +'"></add-remove-lister>';
}
}
templateHTML += '</li>';
}
templateHTML += '<ul>';
return templateHTML;
}
return {
restrict: 'E',
scope: {
list: '='
},
link: function(scope, element, attrs) {
var el = $compile(getTemplate(scope.list))(scope);
element.replaceWith(el);
}
};
});
指令中的Angular可選屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.