Question

我想从我的指令链接访问控制器中的 $ scope 。它失败并抛出错误。谢谢你的帮助。

错误为type error: scope.something is undefined。

HTML

<div ng-controller="myController">
  show me something {{ something }}
  <!-- this is a canvas -->
  <my-directive></my-directive>
</div>

JS

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) {
   // this is the something
   $scope.something = false;
}]).directive(myDirective, function(){
  return {
    template: '<canvas width='500px' height='500px'></canvas>',
    link: function(scope, el, attr) {
      //how to access that 'something'
      var bah = scope.something;
    }
  };
});

UPDATE 非常感谢大家。特别是对于你@immirza

很抱歉，我不能一一回复你。它只需添加$parent

//how to access that 'something'
var bah = scope.$parent.something

Answer 1

您是否尝试设置＆＃34;范围＆＃34;选项＆＃34; false＆＃34;在指令声明中？使用此选项，指令的范围必须与控制器的范围相同。

Answer 2

改变这个......

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) {
   // this is the something
   $scope.something = false;
}]).directive(myDirective, function(){
  return {
    template: '<canvas width='500px' height='500px'></canvas>',
    link: function(scope, el, attr) {
      //how to access that 'something'
      var bah = $scope.something;//changed from scope.something to $scope.something 
    }
  };
});

Answer 3

如果我正确理解你的问题，你想要一个指令：

1 /没有孤立的范围（因此您可以访问父范围并与之交互）

2 /您希望与控制器共享一些范围属性。

所以解决方案是：

1 / @jkoestinger回答，

2 /使用指令属性和范围选项对象。

但对我来说，你应该在这里花些时间：https://docs.angularjs.org/guide/directive

Answer 4

您的代码将按您的预期运行。此问题是代码中存在某些类型错误。

请使用

HTML

<div ng-controller="myController">
      show me something {{ something }}
      <!-- this is a canvas -->
      <my-directive></my-directive>
</div>

角

angular.module('fooBar',[])
  .controller('myController', ['$scope', function($scope) {
    // this is the something
    $scope.something = false;
  }])
  .directive('myDirective', function(){
    return {
      template: '<canvas width="500px" height="500px"></canvas>',
      link: function(scope, el, attr) {
        //how to access that 'something'
        var bah = scope.something;
        console.log(bah)
      }
    };
  });

请参阅fiddle

<强>释

除非另有说明，否则该指令不具有自身的范围。它将具有父母的范围。在这种情况下，“scope of myDirective”与scope of myController相同。这是因为我们可以访问scope.something in directive scope。

代码错误

指令和控制器名称应在引号中。即（'myDirective'不myDirective）
引号内的引号应分开。

'<canvas width="500px" height="500px"></canvas>' //correct
```
`'<canvas width='500px' height='500px'></canvas>'` `//incorrect`
```

Answer 5

scope.something未定义，因为在调用控制器之前调用了链接函数的指令。您需要使用$watch。

angular.module('fooBar',[])
   .controller('myController', ['$scope', function($scope) {
       // this is the something
       $scope.something = false;
}]);


angular.module('fooBar').directive('myDirective', function(){
  return {
    template: '<canvas width='500px' height='500px'></canvas>',
    link: function(scope, el, attr) {
        var blah;
        scope.$watch("something", function (value) {
            blah = value;
        });
     }
  };
});

Answer 6

仅供参考，scope is parent to directive因此您需要作为父范围进行访问。尝试以下，它应该工作。

另外，知道为什么抛出未定义错误的最好方法...放一个断点到该行，鼠标移到$ scope并查看所有可用的范围内的项目。

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) {
   // this is the something
   $scope.something = false;
}]).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; // added parent.
    }
  };
});

如何在指令链接中访问角度$ scope控制器？

6 个答案: