AngularJS指令:将动态创建的对象作为嵌套指令的属性传递
AngularJS Directive: Pass dynamically created object as attribute for nested directive
我有一个指令,它包裹着另一个指令。子指令接受"选项"对象作为属性。我想在父指令的链接函数中创建此选项对象,然后将其设置为父指令模板中子指令的属性,但如果动态创建选项对象,则不会设置选项对象。如果在模板本身中静态设置选项对象,则此方法有效。
我这里有一个笨蛋:http://plnkr.co/edit/gNeKMcneO8RDBmlmpt72?p=preview任何指示将不胜感激!!
angular.module('nestedDirectives', [])
.directive('fruitinfo',
[
function() {
return {
restrict: 'A',
scope: {
fruitname: '@?'
},
template: '<br>Fruit Name: {{fruitname}}<br>Fruit Options: {{fruitoptions}}',
link: function(scope, element, attrs) {
scope.fruitoptions = scope.$eval(attrs['fruitinfo']);
}
};
}])
.directive('fruits',
[
function() {
return {
restrict: 'E',
scope: {
selectedFruits: '=?',
btnSizeClass: "@?"
},
template: 'btnSizeClass: {{btnSizeClass}}<br>Fruits: {{fruits}}<br><div ' +
' fruitinfo="fruitOptions" ' +
' fruitname="{{f}}"' +
' ng-repeat="f in fruits">' +
'</div><br><br>' +
'<div fruitname="With static fruitOptions: {{f}}" fruitinfo="{test: ''testOption'', btnSizeClass: ''btn-xs''}" ng-repeat="f in fruits"></div>',
link: function(scope, element, attrs) {
scope.fruitOptions = {test: 'testOption', btnSizeClass: scope.btnSizeClass};
scope.fruits = ['Apple', 'Banana', 'Watermelon', 'Strawberry'];
}
};
}]
)
;
您在
作用域定义中使用$eval而不是像这样使用"&"的任何特定原因
http://plnkr.co/edit/W47LZsQ3i4zS8Feu7sDl?p=preview
如果您使用
fruitoptions:'&fruitinfo'
然后你做
scope.fruitoptions=$scope.fruitoptions()
在您的链接函数中,您将在其原始范围内获得计算的表达式,还可以考虑在链接周期之前调用的控制器函数上执行此操作
我想通了。必须序列化"fruitOptions"值,以便模板可以将其编译为属性,然后可以使用嵌套指令中的"eval"将其转换回对象。普伦克更新了。
相关文章:
- 由于$compile,Javascript(Angular)嵌套指令加载了两次
- 角度嵌套指令回调
- 在嵌套递归指令中将参数传递给父控制器方法
- 带角度指令的嵌套树列表
- 嵌套的Angular指令触发父对象上的作用域函数
- 用angular指令构建嵌套树
- 重新编译AngularJS嵌套指令
- 如何正确地将嵌套的OData$expand指定为Angular$odatarsource指令
- 如何从指令的控制器调用依赖注入服务的嵌套方法
- Angularjs.嵌套指令中的继承作用域
- 基于嵌套指令Angular的宽度更改文本
- 使用 ng-repeat呈现嵌套指令时出错
- 递归嵌套 angularjs 指令
- AngularJS - 包含嵌套属性指令的内容
- 角度嵌套指令仅呈现第一个子指令
- 带有嵌套指令的 Angularjs
- AngularJs:迭代指令内的数组以创建嵌套的指令集
- AngularJS指令:将动态创建的对象作为嵌套指令的属性传递
- 嵌套指令 - 无法将 args 从 Angularjs 中的子指令传递给控制器方法
- AngularJs指令:嵌套的ng-class失败了