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

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

更新真的谢谢大家。 特别是对你@immirza

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

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

Answer 1

您是否尝试在指令声明中将“ scope”选项设置为“ false”？ 使用此选项时，伪指令的范围必须与控制器的范围相同。

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

请参考小提琴

讲解

除非指定，否则该伪指令本身没有范围。 它将具有父项的范围。 在这种情况下，“ scope of myDirective的scope of myDirective的scope of myController相同。 这是因为我们可以访问scope.something in directive scope 。

代码错误

1. 指令和控制器名称应用引号引起来。 即（ 'myDirective'不是myDirective ）

2. 引号内的引号应分开。

   '<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.
    }
  };
});