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

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

“问题清单” 指令：

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

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

---

在other examples中，ng-click处理程序始终绑定在控制器上。在我的情况下，我需要从指令中触发一个事件，更改指令值，并让它更新控制器。

Answer 1

你应该通过父范围的财产通过指令的元素属性绑定到：

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

这里demo。

Answer 2

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

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

 
     } 
 
    ] 
 
    }; 
 
});

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

Answer 3

我看到你的HTML中mistacke：

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

必须

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

被取代10

它缺少一个报价。

而对于这个问题，你使用一个原始类型绑定直接。尝试封装在父范围值到一个对象：

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

Answer 4

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

一旦考虑你必须从控制器值传递给指令

像

scope: { 
    page : '=' 
}, 

然后

您不能访问父范围，从而需要因此transclude你的孩子的范围，但它似乎已过时在某些版本中。

因此最佳做法是与$ rootScope共享页面变量。在这两个控制器和指示注射页面 第一注射$ 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