我试图在指令的link函数中读取ng-controller函数内初始化的变量。
Html内容 - index.html as,
<p window-open url="data.url">{{data.name}}</p>
app.directive('windowOpen', function($window) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$window.open(attrs.url,"self");
}
};
});
app.js,
<div ng-controller="skCtrl">
<span sk-custom>click</span>
</div>
当我点击鼠标时,它会抛出错误,
app.controller('skCtrl', function ($scope, $element) {
$scope.data = "hello world"
})
app.directive("skCustom", function(){
return {
scope: {
data: "="
},
link: function(scope, elem, attr){
elem.bind("click", function(){
//both the statements throw error...
console.log(data)
console.log(scope.data)
})
}
}
})
我在这里缺少什么?
答案 0 :(得分:2)
您正在使用绑定创建隔离范围。您可以删除scope:{}
或通过指令设置绑定。
<sk-custom data="data"></sk-custom>
你也可以使用scope.$parent
,但是如果你完全确定它会创建对父范围的依赖
答案 1 :(得分:2)
你只需要指令中的数据,例如: -
<span sk-custom data="name">click</span>
在控制器中我定义了名称: -
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
指令代码: -
app.directive("skCustom", function(){
return {
scope: {
data: "="
},
link: function(scope, elem, attr){
elem.bind("click", function(){
//both the statements throw error...
console.log(scope.data)
})
}
}
});
数据未定义
它发生了,因为数据没有在指令中定义,因为我必须从指令模板传递scope.data。
PS: - 范围。$ apply();如果您更改范围内的某些内容以运行摘要周期,则是必需的。
答案 2 :(得分:0)
绑定方法未达到摘要周期。所以,你需要使用$ apply方法:
link: function(scope, elem, attr){
elem.bind("click", function(){
console.log(scope.data);
scope.$apply();
})
}
答案 3 :(得分:0)
使用ngModel它是双向绑定的默认设置
请参阅此示例:http://jsfiddle.net/4hxfghp1/1/
的
的app.directive("skCustom", function(){
return {
require: "?ngModel",
link: function(scope, elem, attr){
elem.bind("click", function(){
//both the statements throw error...
console.log(scope.data)
console.log(scope)
})
}
}
的
它将为您提供控制器的孔范围