如何在指令鏈接中訪問角度$ 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; 
     }); 
    } 
    }; 
});