父范围没有从选择指令更新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从指令

回答

相关问题