從子角度功能更新父控制器值

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

---

在其他示例中 ， ng-click處理程序始終綁定在Controller上。 就我而言，我需要從指令中觸發一個事件，更改指令值，並讓它更新控制器。

Answer 1

您應該傳遞父作用域的屬性以通過指令的element屬性綁定到：

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

這里是演示 。

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

如果有人為您工作，請告訴我，否則我們可以進行更多研究。

卡哈敏

Answer 4

我為您創建了一個示例應用程序

 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>