ng-controller变量在指令的链接函数中不可见

时间:2015-06-20 11:13:44

标签: javascript angularjs

我试图在指令的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)
      })
    }
  }
})

我在这里缺少什么?

4 个答案:

答案 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)
      })
    }
  }
});

Plunker

  

数据未定义

它发生了,因为数据没有在指令中定义,因为我必须从指令模板传递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)
      })
    }
  }

它将为您提供控制器的孔范围