1. ホーム
  2. 質問と答え
  3. 親スコープがディレクティブからのng-changeでselectから更新しない

親スコープがディレクティブからのng-changeでselectから更新しない

2017-04-25 10 views
0

これについての記事をいくつか見てきましたが、まだ理解できません。親スコープがディレクティブからのng-changeでselectから更新しない

親スコープをwithinディレクティブから更新できません。私は、スコープの値がプリミティブではなく、オブジェクトでなければならないと言っている記事を読んだが、なぜこれが動作していないのか分からない。選択含まれている期間、selection.html以下

angular.module("awaCommon").directive("durationSelection", [ 
    function() { 
     return { 
      scope: {}, // tried removing this as well as seen in some articles 
      restrict: "E", 
      templateUrl: "duration-selection.html", 
      link: function ($scope, $element, $attr) { 
      } 
     } 
    } 
]);

：

angular.module('moduleMihai').controller('someController', 
    ['$scope', '$http', function ($scope, $http) { 

      $scope.durations = [{ 
       field: 'yearly', 
       title: 'Yearly' 
      }, { 
       field: 'monthly', 
       title: 'Monthly' 
      }, { 
       field: 'weekly', 
       title: 'Weekly' 
      }]; 
      $scope.selectedDuration = $scope.durations[0]; 

      $scope.handleDurationSelection = function() { 
       console.log($scope.selectedDuration.field + ' selected'); 
       $scope.someData.title[0] = "SOMETHING ELSE!!"; 
      }; 


      $scope.someData= { 
       title: ['Value1', 'Value2', 'Value3'] }; 
}]);

ディレクティブは、その中の任意のものを持っていない

<div ng-controller="someController"> 
<div> 
    Child: {{someData.title[0]}} 
    <select 
     ng-options="item.title for item in durations" 
     ng-model="selectedDuration" 
     ng-change="handleDurationSelection()"> 
    </select> 
</div>

だから、これを値が選択されると、子：{{someData.title [0]}}の上の値が正しく更新されます。しかし、ここで1 - 親は：{{someData.title [0]}}、主経路ではない：

<div ng-controller="someController"> 
<div> 
    Parent: {{someData.title[0]}} 
    <duration-selection></duration-selection> 
</div>

私は親スコープが異なる更新するために更新する必要がありますディレクティブ

出典

2017-04-25 Mihai Banu

+1

に役立ちます。 「角度」タグは、角度v2 +のものです。そうすれば、適切な視聴者の注目を集めることができます。 – DeborahK

+0

確かに、ありがとうございます。実際にもう一度質問 –

答えて

4

あなたのディレクティブからあなたの親スコープをやりとりして更新する方法はTodd about events $emit and $broadcast（EMIT及び放送）の取り扱い

  • イベントを使用することです：変更frが存在するときので、ここで私たちは親に警告om子ディレクティブを使用すると、親はイベントをリッスンします。 私が何らかの悪い側面に
  • ディレクティブは関数を渡すために属性最小限の使用をお勧め：我々は最善の方法は私のために（ディレクティブから、必要なときにそれを扱うか、呼び出すために私たちのディレクティブに処理することが私たちの関数を渡します）
  • $ scope。$ parent.lngBusinessUnitを更新する命令の中に、関数をディレクティブに再度渡す必要はありません。ディレクティブはロジックを処理するディレクティブであるためです。親をまっすぐに直接更新するだけです。
  • の変更を確認するのに役立つ親ディレクティブでの$ watchの使用$watch read more：return-> scopeで双方向バインディングを使用して、ngModelを渡されたparamの指令にマップするので、 "="取り扱い上の可能性

    • イベントのそれぞれについて、実施例

    • 指令セットアップから機能 

angular.module("eventTest", []) 
 
    .controller("mainCtrl", function ($scope){ 
 
     console.log("am here"); 
 
    $scope.parentValue = "test"; 
 
    $scope.primaryVariable = "Male"; 
 
    
 
    $scope.onChange = function(){ 
 
    $scope.parentValue = $scope.primaryVariable; 
 
    } 
 
    
 

 
    }) 
 
    .directive("child", function(){ 
 
    return { 
 
     restrict:'E', 
 
     scope: { 
 
     primaryVariable:"=", 
 
     callMe:"&"//note this syntax, check angular directive doc 
 
     }, 
 
     templateUrl:"child.html", 
 
     controller: function ($scope){ 
 
     $scope.valueToPass = ["Male", "Female"]; 
 
     //this is method is triggered when the select of our primaryVarible is changed 
 
     $scope.childChanges = function(){ 
 
     $scope.callMe(); 
 
     } 
 
     } 
 
    } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <body ng-app="eventTest"> 
 
    <div ng-controller="mainCtrl"> 
 
    <h1>Directive Function Passing</h1> 
 
    Parent: <b>{{parentValue}}</b> 
 
    <br> 
 
    <child primary-variable="primaryVariable" call-me="onChange()"></child> 
 
    </div> 
 

 

 
    <script type='text/ng-template' id="child.html"> 
 
    Child value : <b>{{primaryVariable}}<b> <br> 
 
    <select ng-model="primaryVariable" ng-change="childChanges()"> 
 
     <option ng-repeat="item in valueToPass">{{item}}</option> 
 
    </select> 
 
    </script> 
 

 
    </body>

を使用して 

angular.module("eventTest", []) 
 
.controller("mainCtrl", function ($scope){ 
 
    console.log("am here"); 
 
$scope.parentValue = "test"; 
 
$scope.valueToPass = ["Male", "Female"]; 
 

 

 
//let's catch the updated content 
 
$scope.$on('childUpdated', function(event, value){ 
 
    $scope.parentValue = value; 
 
    console.log("updated from child directive", value); 
 
}); 
 

 

 
}) 
 
.directive("child", function(){ 
 
return { 
 
    restrict:'E', 
 
    scope: { 
 
    valueToPass:"=" 
 
    }, 
 
    templateUrl:"child.html", 
 
    controller: function ($scope){ 
 
    //this is method is triggered when the select of our valueToPass is changed 
 
    $scope.childChanges = function (value){ 
 
     $scope.$emit('childUpdated', value); 
 
     console.log("child emitted this:", value); 
 
    } 
 
    } 
 
} 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="eventTest"> 
 
<div ng-controller="mainCtrl"> 
 
<h1>Event Test Just for your case, advise you read up</h1> 
 
Parent: <b>{{parentValue}}</b> 
 
<br> 
 
<child value-to-pass="valueToPass"></child> 
 
</div> 
 

 

 
<script type='text/ng-template' id="child.html"> 
 
Child value : <b>{{menu}}<b> <br> 
 
<select ng-model="menu" ng-change="childChanges(menu)"> 
 
    <option ng-repeat="item in valueToPass">{{item}}</option> 
 
</select> 
 
</script> 
 

 
</body>

  • ディレクティブの属性、スコープ。$親$見る

angular.module("eventTest", []) 
 
     .controller("mainCtrl", function ($scope){ 
 
      console.log("am here"); 
 
     $scope.parentValue = "test"; 
 
     $scope.primaryVariable = "Male"; 
 
      
 
     $scope.$watch('primaryVariable', function(){ 
 
     $scope.parentValue = $scope.primaryVariable; 
 
      
 
     }); 
 
      
 
     }) 
 
     .directive("child", function(){ 
 
     return { 
 
      restrict:'E', 
 
      scope: { 
 
      primaryVariable:"=" 
 
      }, 
 
      templateUrl:"child.html", 
 
      controller: function ($scope){ 
 
      $scope.valueToPass = ["Male", "Female"]; 
 
      } 
 
     } 
 
     });
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
     <body ng-app="eventTest"> 
 
     <div ng-controller="mainCtrl"> 
 
     <h1>using $watch</h1> 
 
     Parent: <b>{{parentValue}}</b> 
 
     <br> 
 
     <child primary-variable="primaryVariable"></child> 
 
     </div> 
 

 

 
     <script type='text/ng-template' id="child.html"> 
 
     Child value : <b>{{primaryVariable}}<b> <br> 
 
     <select ng-model="primaryVariable" ng-change="childChanges()"> 
 
      <option ng-repeat="item in valueToPass">{{item}}</option> 
 
     </select> 
 
     </script> 
 

 
     </body>
を使用して 

angular.module("eventTest", []) 
 
     .controller("mainCtrl", function ($scope){ 
 
      console.log("am here"); 
 
     $scope.parentValue = "test"; 
 
     $scope.primaryVariable = "Male"; 
 
      
 

 
     }) 
 
     .directive("child", function(){ 
 
     return { 
 
      restrict:'E', 
 
      scope: { 
 
      primaryVariable:"=" 
 
      }, 
 
      templateUrl:"child.html", 
 
      controller: function ($scope){ 
 
      $scope.valueToPass = ["Male", "Female"]; 
 
      //this is method is triggered when the select of our primaryVarible is changed 
 
      $scope.childChanges = function(){ 
 
      $scope.$parent.parentValue = $scope.primaryVariable; 
 
      } 
 
      } 
 
     } 
 
     });
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
     <body ng-app="eventTest"> 
 
     <div ng-controller="mainCtrl"> 
 
     <h1>Using $parent</h1> 
 
     Parent: <b>{{parentValue}}</b> 
 
     <br> 
 
     <child primary-variable="primaryVariable"></child> 
 
     </div> 
 

 

 
     <script type='text/ng-template' id="child.html"> 
 
     Child value : <b>{{primaryVariable}}<b> <br> 
 
     <select ng-model="primaryVariable" ng-change="childChanges()"> 
 
      <option ng-repeat="item in valueToPass">{{item}}</option> 
 
     </select> 
 
     </script> 
 

 
     </body>

  • を使用して

    • 希望これは `angularjs`タグを使用し、角度v1の

出典

2017-04-25 23:01:07

+0

。親の親を更新するために同じものを使用できますか？ –

+0

上記のあなたのコメントを得ていない、少し明示的に –

+0

ああ申し訳ありませんが、例えば、それぞれ独自のコントローラ/スコープを持つディレクティブをネストしている場合。 –

関連する問題

 関連する問題