Dies bezieht sich auf $ Scope eines anderen Controllers in Angularjs

Grundsätzlich der Button klicken wird aufrufen ShowHide() Funktion von MyController, und wenn $scope.IsVisible==false, kopieren Sie den Wert.

Aber hier, das Wort zeigt dies auf die $scope von formController. Und der output von console.log bewies dies, obwohl dies das ist was ich erwarte zu tun, aber kann mir jemand erklären wie das passiert? Ist das wegen Javascript Prototyp?

<div ng-app="MyApp" ng-controller="MyController"> 
    <div ng-controller="formController"> 
     <div ng-bind="broker.info"></div> 
     <div ng-show="IsVisible">Some content to be hide</div> 
     <button ng-click="ShowHide()">ok</button> 
    </div> 
</div>

Script:

var app = angular.module('MyApp', []); 
var old = <?=json_encode($broker)?>; 
app.controller('formController',function ($scope) { 
    $scope.broker = angular.copy(old); 
}); 
app.controller('MyController', function ($scope) { 
    $scope.IsVisible = false; 
    $scope.ShowHide = function() { 
     //If DIV is visible it will be hidden and vice versa. 
     $scope.IsVisible = $scope.IsVisible ? false : true; 
     if($scope.IsVisible==false) { 
      this.broker = angular.copy(old); 
      console.log(this); 
      console.log($scope); 
     } 
    } 
});

Screenshot:

Quelle

2017-03-01 Chenhai-胡晨海

Mögliche Duplikat [Was die Nuancen der Umfang prototypal/prototypische Vererbung in AngularJS sind?] (Http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal -prototypische-Vererbung-in-Angularjs) – Claies

Kurze Antwort auf Ihre Frage ist controllerAs Syntax zu verwenden.

<!DOCTYPE html> 
<html> 
<head> 
    <title>ControllerAs</title> 
    <style> 
     div{ 
      border: 1px solid black; 
      margin: 10px; 
      padding: 10px; 
     } 
    </style> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.min.js"></script> 

    <script type="text/javascript"> 
     var app = angular.module('app', []); 
     app.controller('test0', function($scope){ 
      $scope.message = "Test0"; 
     }); 
     app.controller('test1', function($scope){ 
      $scope.message = "Test1"; 
     }); 
     app.controller('test2', function(){ 
      this.message = "Test2"; 
     }); 
     app.controller('test3', function($scope){ 
      this.message = "Test3"; 
      var ctrl = this; 
      this.changeMessage = function(){ 
//    ctrl.message = this.newMessage;// doesn't work 
       ctrl.message = new String($scope.newMessage); 
      } 
      $scope.$watch(angular.bind(this, function(){ 
       return this.message; 
      }), function (newVal, oldVal) { 
       if(newVal.toString() === oldVal.toString()){ 
        console.log("No change"); 
       } else { 
        console.log("message changed"); 
       } 
       }); 
     }); 
    </script> 

</head> 
<body ng-app="app"> 

<div ng-controller="test0"> 
    <h2>message: {{message}}</h2> 
    <div ng-controller="test1"> 
     <h2>message: {{message}} </h2> 
     <h2>what is parent message: {{$parent.message}}</h2> 
     <div ng-controller="test2 as t2"> 
      <h2>t2.message: {{t2.message}}</h2> 
      <div ng-controller="test3 as t3"> 
       <h2>t3.message: {{t3.message}} </h2> 
       <h2>What was first message: {{$parent.$parent.$parent.message}} </h2> 
       <h2>Get previous message: {{t2.message}}</h2> 
       <hr/> 
       <input type="text" placeholder="Enter new message" ng-model="newMessage"><button ng-click="t3.changeMessage()">Change This Message</button> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Quelle

2017-03-01 21:30:21

Dies bezieht sich auf $ Scope eines anderen Controllers in Angularjs

Antwort

Verwandte Themen