如何從內部指令更改控制器的$ scope屬性？

Question

我在視圖中有一個按鈕，它完全在視圖中處理，因爲它只是一個簡單的開關，用ng-show指令切換元素的視圖。我希望能夠從自己的指令中切換視圖。

這裏的什麼我試圖做一個示例代碼：

<div> 
<button ng-click="ToChange=true"> 
<my-directive ng-show="ToChange"></my-directive> 
</div> 

    .directive('myDirective', function() { 
    return { 
    ... 
    controller: function ($scope) { 
     $scope.whenClickedThis = $scope.ToChange=false ??? 
    }, 
    ... 
    }; 
}); 

Answer 1

在你的角度指令，你可以有訪問父範圍或隔離範圍。如果你打算使用父範圍，然後

angular.module('app') 
.controller('mainController', function($scope){ 
    $scope.ToChange = false; 
}) 
.directive('myDirective', function(){ 
    return { 
     restrict: 'E', 
     controller: function($scope){ 
      //You can access $scope.ToChange here 
     }), 
     link : function($scope, $element, $attribute){ 
      //You can access $scope.ToChange here 
     } 
    } 
}); 

<div ng-controller="mainController"> 
    <button ng-click="ToChange=true"> 
    <my-directive ng-show="ToChange"></my-directive> 
</div> 

如果您打算爲您創造指令的分離範圍，

angular.module('app') 
.controller('mainController', function($scope){ 
    $scope.ToChange = false; 
}) 
.directive('myDirective', function(){ 
    return { 
     restrict: 'E', 
     scope : { 
      change : '=' 
     }, 
     controller: function($scope){ 
      //Now you can access $scope.change from here 
     }), 
     link : function($scope, $element, $attribute){ 
      //Now you can access $scope.change from here 
     } 
    } 
}); 

<div ng-controller="mainController"> 
    <button ng-click="ToChange=true"> 
    <my-directive change="ToChange"></my-directive> 
</div> 

你可以在喲創建一個手錶烏爾指令，如果你想找出任何改變你的變量

$scope.$watch('change', function(oldValue, newValue) { 
    //Do something here; 
}); 

瞭解更多關於角範圍here

Answer 2

var app = angular.module("test",[]); 

app.directive("myDirective",function(){ 

    return { 

     restrict: "EA", 

     scope: true, 

     link: function(scope,elem,attr){ 

      // code goes here ... 
     } 

    } 

}); 

Answer 3

您可以直接訪問您的指令父範圍變量。

angular.module('your-module').directive('myDirective', function() { 
    return { 
    controller: function ($scope) { 
     $scope.ToChange = !$scope.ToChange; 
    } 
    }; 
});