これはAnglerjsの別のコントローラの$ scopeを指します

基本的にボタンクリックはShowHide()の機能をMyControllerから呼び出し、$scope.IsVisible==falseの場合は値をコピーします。

しかし、ここでは、これは$scopeのformControllerを指しています。そして、console.logの出力はこれを証明しましたが、これは何を期待していますか？それはJavascriptプロトタイプのためでしょうか？

<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>

スクリプト：

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

スクリーンショット：あなたの質問の

出典

2017-03-01 Chenhai-胡晨海

[AngularJSでスコーププロトタイプ/原型継承のニュアンスは何ですか？]（http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypalの可能性のある重複-protypypical-in-angularjs） – Claies

短い答えはcontrollerAs構文を使用することです。

<!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>

出典

2017-03-01 21:30:21

これはAnglerjsの別のコントローラの$ scopeを指します

答えて

関連する問題