如何在指令链接中访问角度$ 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; 
    } 
    }; 
}); 

UPDATE 真的感谢你们。尤其是对你来说@immirza

即时对不起，我不能一一答复你。 它只是添加$parent

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

Answer 1

仅供参考，scope is parent to directive所以你需要访问父范围。 请尝试下面，它应该工作。

而且，最好的办法知道它为什么不扔定义的错误......把 断点线，鼠标悬停到$范围，并看到所有可用 项目范围。

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

Answer 2

你有没有尝试设置“范围”选项，在指令中声明为“假”？使用此选项时，指令的范围必须与控制器的范围相同。

Answer 3

改变这个...

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 4

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

1 /没有一个孤立的范围（这样你就可以访问父范围和互动，与它）

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

所以解决方案是：

1/@jkoestinger答案，

2/using指令属性和范围的选项对象。

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

Answer 5

您的代码将工作。这个问题是你的代码中有一些类型错误。

请使用

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.somethingin directive scope。

错误代码

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

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

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

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

Answer 6

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