var bah
可以访问父对象$scope.something
但是当我单击按钮时,控制器中的值更改为false
但不是指令。怎么了?那是一个错误吗?
如何解决这个问题?感谢帮助我,希望你能写一个例子或参考链接
HTML
<div ng-controller="myController">
show me something {{ something }} <br>
<button ng-click="toggleSomething"><button>
<!-- this is a canvas -->
<my-directive></my-directive>
</div>
JS
angular.module('fooBar',[]).controller('myController', ['$scope', function($scope) {
// this is the something
$scope.something = true;
$scope.toggleSomething = function(){
if($scope.something) {
$scope.something = false
} else {
$scope.something = true
}
}
}]).directive('myDirective', function(){
return {
template: '<canvas width="500px" height="500px"></canvas>',
link: function(scope, el, attr) {
//how to access that 'something'
var bah = scope.$parent.something;
}
};
});
UPDATE 非常感谢大家。特别是对于你@immirza
很抱歉,我不能一一回复你。 它只需添加$parent
//how to access that 'something'
var bah = scope.$parent.something
答案 0 :(得分:2)
您可以直接访问$scope.something
中的myDirective
,而无需使用$parent
,因为该指令有shared scope
并且对于你的问题,如果你试图检测指令内的something
更改你不能只放一个console.log($scope.something)
并检查因为它只执行了一次并且在点击之后它不再打印,这并不意味着something
内的directive
没有变化。
并且你在ng-click
中犯了一个错误,例如ng-click="toggleSomething"
它应该是ng-click="toggleSomething()"
,因为你调用的函数不仅仅是一个变量。
这是一个DEMO
我已将<h1> ... {{ something }}</h1>
放在指令模板中,以显示某些内容在指令中也按预期工作。
通过这个优秀的directive series
答案 1 :(得分:1)
我已经为您的代码添加了一个plunker并添加了对该指令的双向绑定。 你可以在plnkr
看到它angular.module('fooBar',[]).controller('myctr', ['$scope', function($scope) {
// this is the something
$scope.something = true;
$scope.toggleSomething = function(){
if($scope.something) {
$scope.something = false
} else {
$scope.something = true
}
}
}]).directive('myDirective', function(){
return {
//changed canvas to span so for simplixity.
template: '<span width="500px" height="500px">{{blah}} --- {{ dsomething }}</span>',
scope: { dsomething: "=" },
link: function(scope, el, attr) {
//watching $parent.variable is not recommonded as it makes your
//directive less reusable and forces who ever wants to use your
//directive to create the variable. dsomething will just update
//nicely w/o any code in this link function. the code below is just to demonstrate
//how to get it done by using $watch with $parent scope.
//how to access that 'something'
if(!scope.dsomething){
scope.dsomething = "something";
}
//because blah is a local variable and not a two-way binding variable
//we need to use $watch to update the value.
//you can use "dsomething" instead of "$parent.something"
//
scope.$watch("$parent.something", function(newVal, oldVal){
scope.blah = newVal;
})
}
};
});
您可以将您的指令用作:
<div ng-controller="myctr">
show me something {{ something }} <br />
<button ng-click="toggleSomething()">Update Something</button>
<button>
<!-- this is a canvas -->
<my-directive dsomething="something"></my-directive>
</button>
</div>
注意ng-click =&#34; toggleSomething()&#34;。它是一个不通过函数的函数调用。纳克单击=&#34; toggleSomething&#34;不会工作。
答案 2 :(得分:0)
问题是你误解了双向数据绑定是什么,基本上任何带有指令的two way bound
元素都可以被控制器或指令更新,而另一个会立即看到这个变化反映在其中
当您使用$parent
访问它时,您正在强行读取指令中的值,仅此而已,没有人告诉指令重新评估var bah = scope.$parent.something
,因为scope.something
的值已经在父控制器中更新。