父範圍沒有從選擇指令更新ng-change從指令

我已經看過幾篇文章，但仍然無法弄清楚。父範圍沒有從選擇指令更新ng-change從指令

我無法從指令中更新父範圍。我已閱讀文章說範圍值不應該是原始的，而應該是一個對象，但仍然無法弄清楚爲什麼這不起作用。

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

指令沒有在它的任何東西：

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

期間，selection.html以下其中包含選擇：

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

所以這上面的值在Child中：{{someData.title [0]}} - 在選擇值時正確更新。但是，一個在這裏 - 家長：{{someData.title [0]}}，在主要路線是不是：

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

我需要父範圍，以更新不同的更新指令

來源

2017-04-25 Mihai Banu

對角V1，使用'angularjs'標籤。 'angular'標籤適用於Angular v2 +。這樣你就會吸引合適觀衆的注意力。 – DeborahK

確定，會做謝謝。 –

互動並從您的指令是使用

事件處理更新父作用域（發射和廣播）的方式Todd about events $emit and $broadcast：所以在這裏我們提醒家長時，有一個變化FR om子指令，然後父母監聽事件。 我建議最少使用，由於一些壞的方面
指令屬性傳遞函數：我們通過我們的函數將要處理我們的指令來處理或指令需要時調用它（對我來說是最好的方法）
裏面的指令更新$ scope。$ parent.lngBusinessUnit，不需要再次將該函數傳遞給指令，沒必要。因爲指令是處理邏輯的指令。我們直接直接更新父母。
使用$看父指令來幫助檢查爲selectedDuration$watch read more的變化：這是很容易的，因爲我們使用兩種方式在我們return-結合ngModel映射到我們的指令傳遞param>範圍「=」從指令設定

實施例對於每一個上述可能性

事件處理

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

使用$看

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>

希望這有助於

來源

2017-04-25 23:01:07

實際上還有一個問題。我是否可以使用相同的方式更新父級的父級？ –

沒有得到您的評論上面，有點明確 –

哦對不起，例如，如果我有嵌套指令，每個都有自己的控制器/範圍。 –

父範圍沒有從選擇指令更新ng-change從指令

回答

相關問題