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

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

错误是

类型错误：scope.something未定义

HTML

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

更改为此

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

angular.module（'fooBar'，[]）.controller（myController，['$scope'，function（$scope）{
//这是最重要的
$scope.something=false；
}]).directive（myDirective，function（）{
返回{
模板：“”，
链接：功能（范围、el、属性）{
//如何访问“某物”
var bah=$scope.something；//从scope.something更改为$scope.something
}
};
});

仅供参考，

范围是指令的父范围

，因此您需要作为父范围进行访问。 尝试以下操作，它应该会起作用

此外，最好的方式知道为什么它抛出未定义的错误。。。放 将断点移到行上，将鼠标移到$scope上，然后查看所有可用的 项目的范围

angular.module（'fooBar'，[]）.controller（myController，['$scope'，function（$scope）{
//这是最重要的
$scope.something=false；
}]).directive（myDirective，function（）{
返回{
模板：“”，
链接：功能（范围、el、属性）{
//如何访问“某物”
var bah=scope.$parent.something；//添加了父项。
}
};
});

如果我正确理解了您的问题，您希望有一个指令：

1/没有独立的作用域（因此您可以访问父作用域并与其交互）

2/您想与控制器共享一些作用域属性

因此，解决方案是：

1/@jkoestinger回答

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

---

但对我来说，您应该在这里花些时间：

您的代码将按预期工作。这个问题是因为代码中存在一些类型错误

请使用

HTML

---

作用域。某些

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

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

angular.module（'fooBar'，[]）
.controller（'myController'，['$scope'，函数（$scope）{
//这是最重要的
$scope.something=false；
}]);
angular.module（'fooBar'）。指令（'myDirective'，函数（）{
返回{
模板：“”，
链接：功能（范围、el、属性）{
var blah；
范围：$watch（“某物”），功能（值）{
布拉赫=价值；
});
}
};
});

它应该在您的指令中可用，因为它没有孤立的scope.console.log（scope）要更好地理解，请阅读以下内容：“scope”选项默认为“false”。

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

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

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

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

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

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