khajaamin

Question

我试图从子指令更改父控制器中的范围值。

我已添加=进行双向绑定，这样当我点击指令<tr>时，它会触发openDetail，这会更新scope.page，已被双向限制。

但它没有更新控制器的page值。

控制器HTML：

TEST : {{page}} //Not changed

<questions-list></questions-list>

控制器：

$scope.page = 'Not changed';

指令HTML：

<tr ng-repeat="q in questions" ng-click="openDetail( q.id )">

＆＃34;问题列表＆＃34;指令：

scope: {
    page : '='
},
...

scope.openDetail = function (id) {
    scope.page = 'question_detail';
};

在other examples中，ng-click处理程序始终绑定在Controller上。在我的例子中，我需要从指令中激活一个事件，更改指令值，并让它更新控制器。

Answer 1

您应该传递父范围的属性以绑定到via指令的元素属性：

<questions-list page="page"></questions-list>

这里是demo。

Answer 2

我在你的HTML上看到了一个错误：

<tr ng-repeat="q in questions ng-click="openDetail( q.id )">

必须替换为

<tr ng-repeat="q in questions" ng-click="openDetail( q.id )">

缺少报价。

对于这个问题，你使用基本类型绑定到directve上。尝试将值封装到父作用域的对象中：

$scope.page = { value: 'Not changed' };
<questions page="page.value">...</questions>

Answer 3

我可以给你一些不同的方法。

一旦考虑必须将值从控制器传递到指令

喜欢

scope: {
    page : '='
},

然后

您无法访问父作用域，因此需要转换您的子作用域，但在某些版本中似乎已弃用。

因此，最佳做法是与$ rootScope.page共享页面变量首先在控制器和指令注入中注入$ rootScope 并使用

{{$root.page}}  // in controller

//并在指令函数中进行此更改

scope.openDetail = function (id) {
    $rootScope.page = 'question_detail';
};

此外，如果您需要其他方式，如＃BROADCAST或#EMIT（在angularjs中真的很棒）

///指令

 $rootScope.$emit("emitName", {page:"page value" });

//在控制器中

 $rootScope.$on("emitName",function(event,data){
       $scope.page = data.page; // this comes from directive and assign to current scope's page variable 
   });

如果有人为你工作，请告诉我，否则我们可以进行更多研究。

khajaamin

Answer 4

我为您创建了一个示例应用

＆＃13;

var app = angular.module('test', []);

app.controller('testCon', function($scope) {

  $scope.page = "Parent controll";

});

app.directive('questions', function() {

  return {
    scope: true,
    controller: ['$scope',
      function($scope) {

      }
    ]
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCon">
  {{page}}

  <questions>{{page}}</questions>

</div>

＆＃13;

从子角度函数更新父控制器值

4 个答案:

khajaamin