我设置了plunker来演示这个问题。单击Bob按钮不起作用。我所期望的是,指令元素的子元素将具有相同的隔离作用域。是否必须将子元素移到指令的template属性中?
gcuhipw91#
我会定义一个对象pass。使用方法setDirectiveTitle和标题设置pass:演示**Plunker**
pass
setDirectiveTitle
JS
angular.module("myApp", []) .directive("myScopedDirective", function() { return { scope: { pass: '=', prefix: "@msdTitle" }, link: function($scope, $element, $attributes) { $scope.pass.setDirectiveTitle = function(title) { $scope.pass.title = $scope.prefix + title; } } }; }) .controller("AppController", ["$scope", function($scope) { $scope.passVal = {}; $scope.setAppTitle = function(title) { $scope.passVal.title = title; }; }]);
字符串
HTML
<div ng-controller="AppController"> <h2>{{title}}</h2> <button ng-click="setAppTitle('App 2.0')">Upgrade Me!</button> <div my-scoped-directive pass="passVal" msd-title="I'm a directive inside the app: {{passVal.title}}"> <h2>{{passVal.title}}</h2> <button ng-click="passVal.setDirectiveTitle('Bob')" >Bob It!</button> </div> </div>
型
1aaf6o9v2#
问题是,没有编译,你必须使用transclusion才能在指令中编译html。http://plnkr.co/edit/hGKeTqqU62Na0MWPvBIZ?p=preview或者你可以简单地传递一个模板:http://plnkr.co/edit/ZYhTdlwSDp0L3jjErOQt?p=preview的但是在这种情况下不能使用范围属性绑定。因为在第二次更新父作用域时,第三次单击子作用域将不会如您预期的那样更新。你必须以不同的方式传播数据。
2条答案
按热度按时间gcuhipw91#
我会定义一个对象
pass
。使用方法setDirectiveTitle
和标题设置pass
:演示**Plunker**
JS
字符串
HTML
型
1aaf6o9v2#
问题是,没有编译,你必须使用transclusion才能在指令中编译html。http://plnkr.co/edit/hGKeTqqU62Na0MWPvBIZ?p=preview
或者你可以简单地传递一个模板:http://plnkr.co/edit/ZYhTdlwSDp0L3jjErOQt?p=preview的
但是在这种情况下不能使用范围属性绑定。因为在第二次更新父作用域时,第三次单击子作用域将不会如您预期的那样更新。你必须以不同的方式传播数据。