Wie kann ich die $ scope Eigenschaft des Controllers von der internen Anweisung ändern?

Question

Ich habe eine Schaltfläche in meiner Ansicht, die vollständig in der Ansicht behandelt wird, da es nur ein einfacher Schalter zum Umschalten der Ansicht eines Elements mit ng-Show-Anweisung ist. Ich möchte in der Lage sein, die Ansicht von innerhalb der Direktive selbst umzuschalten.

Hier ist ein Beispiel-Code, was zu tun versuche:

<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

In Ihrer Winkel Richtlinie können Sie entweder Zugriff geordneten Bereich haben oder Umfang isolieren. Wenn Sie planen, übergeordneten Bereich zu verwenden, dann

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> 

Wenn Sie ein Isolat Rahmen für Ihre Richtlinie zu schaffen, planen,

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> 

Sie können eine Uhr in yo erstellen ur-Richtlinie, wenn Sie wollen Ihre Variable

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

Lesen Sie mehr über Winkel Umfang 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

Sie können direkt in der Richtlinie übergeordneten Bereich Variable zugreifen Änderungen identifizieren.

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