![](/img/trans.png)
[英]angularjs nested directive scope isolation hiding parent directive object
[英]Nested object inside scope object in custom directive
為什么我不能在我的范圍對象中的嵌套對象中綁定,如下所示:
app.directive('myDirective', function() {
return {
scope: {
dropdown: {
option: '=selectedOption' //not working
}
}
}
})
我收到一個錯誤:
a.match不是一個函數
這是一個工作的plunker。
“為什么”的答案是“因為這不是它的工作原理”。
解析指令范圍的AngularJS源代碼如下: https : //github.com/angular/angular.js/blob/master/src/ng/compile.js#L829
function parseIsolateBindings(scope, directiveName, isController) {
var LOCAL_REGEXP = /^\s*([@&]|=(\*?))(\??)\s*(\w*)\s*$/;
var bindings = {};
forEach(scope, function(definition, scopeName) {
var match = definition.match(LOCAL_REGEXP);
if (!match) {
throw $compileMinErr('iscp',
"Invalid {3} for directive '{0}'." +
" Definition: {... {1}: '{2}' ...}",
directiveName, scopeName, definition,
(isController ? "controller bindings definition" :
"isolate scope definition"));
}
bindings[scopeName] = {
mode: match[1][0],
collection: match[2] === '*',
optional: match[3] === '?',
attrName: match[4] || scopeName
};
});
return bindings;
}
正如您所看到的,它只通過scope
對象屬性進行單次傳遞,並且不會遞歸地下降到對象屬性中。
不確定這是否有效:
scope: {
"dropdown.option": "=selectedOption"
}
但是,作為一種解決方法,您可以這樣寫:
app.directive('myDirective', function() {
return {
scope: {
dropdownOption: "=selectedOption"
},
controller: ["$scope", function($scope) {
$scope.dropdown = $scope.dropdown || {};
$scope.$watch('dropdownOption', function(newValue) {
$scope.dropdown.option = newValue;
});
$scope.$watch('dropdown.option', function(newValue) {
$scope.dropdownOption = newValue;
});
}]
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.