我想从隔离指令中更改$ scope变量,这怎么可能?
我尝试过使用' @,=,&'指令范围内的语法但无法使其工作。
这是我的简化代码
JS
app.controller('testCtrl', function($scope) {
$scope.hello = 'hello';
}
app.directive('testDirective', function() {
return {
restrict: 'E',
template: '<div>{{text}}</div>',
scope: {},
link: function(scope, element) {
scope.text = 'this is my text';
scope.hello = 'hello world!';
}
};
});
HTML
<body>
{{ hello }}
<test-directive />
</body>
这是我想要的输出
hello world!
this is my text
答案 0 :(得分:2)
您可以在指令上设置require
选项并指定父控制器。这会将控制器作为最后一个参数传递给你的链接函数:
app.directive('testDirective', function() {
return {
restrict: 'E',
template: '<div>{{text}}</div>',
require: '^testCtrl',
scope: {},
link: function(scope, element, attrs, testCtrl) {
scope.text = 'this is my text';
testCtrl.setHello('hello world!');
}
};
});
请注意,您必须在控制器上创建此testCtrl.setHello()
方法。这是因为你得到了控制器本身,而不是它注入的范围:
app.controller('testCtrl', function($scope) {
$scope.hello = 'hello';
this.setHello = function(newHello) {
$scope.hello = newHello;
}
}
此外,如果您并不真正关心严格执行控制器依赖性,您可以直接从您的指令访问scope.$parent.$parent.hello
。
答案 1 :(得分:0)
在HTML中,指令必须是蛇形的:
<test-directive />
在您的脚本中,必须以驼峰大小写定义指令:
app.directive('testDirective', function() {
});
另外,添加ngController指令:
<body ng-controller="testCtrl>
</body>
答案 2 :(得分:0)
这是缺少的东西:
<test-directive></test-directive>
因为JS中的camel情况需要
在HTML中用“ - ”分隔。 <body ng-controller="testCtrl">
{{ hello }}
<test-directive hello-from-parent="hello"></test-directive>
</body>
app.directive('testDirective', function() {
return {
restrict: 'E',
scope: {
hello: "=helloFromParent"
},
template: '<div>{{text}}</div>',
link: function(scope, element, attrs) {
scope.text = 'this is my text';
scope.hello = 'hello world';
}
}
});
我设置了一个有效的plnkr here