角度：自定義指令不更新控制器

Question

不久前我開始學習Angular，並且試圖了解范圍，綁定等。

我有一個訂單明細控制器：

orderApp.controller('OrderDetailsController', ['$http','$routeParams','$scope','config', function($http, $routeParams, $scope, config){

    var orderCtrl = this;
    orderCtrl.orderId = $routeParams.orderId;
    orderCtrl.order = {};
    orderCtrl.editingView = false;

   ...

}]);

在訂單詳細信息頁面上，我要輸出有關所選訂單的所有信息。 另外，我們需要賦予用戶編輯訂單的能力。 有關編輯模式的信息存儲在orderCtrl.editingView中。

我決定創建自定義指令。 如果關閉了編輯模式-顯示文本，否則顯示輸入。

    orderApp.directive('editableText', function(){
    return {
        restrict: 'E',
        scope: {
            property: '=property',
            editMode: '=editMode'
        },
        controller: 'OrderDetailsController',
        controllerAs: 'orderCtrl',
        templateUrl: '/pages/editable-text.html'
    }
});

這是模板：

<div class="col-xs-8" ng-if="!editMode">{{property}}</div>
<div class="col-xs-8" ng-if="editMode"><input type="text" class="form-control" ng-model="property"></div>

這就是我在html文件中使用指令的方式：

 <editable-text property="orderCtrl.order.coid" edit-mode="orderCtrl.editingView"></editable-text>

當編輯模式打開/關閉時，文本和輸入正在切換。 問題是，當我在輸入中更改orderCtrl.order.coid屬性時，該屬性未更新。

編輯屬性之前如下所示：

打開編輯模式並更改值：

關閉編輯模式，我們看到舊值：

我需要同步控制器值和指令范圍嗎？ 我認為2向綁定應該自動發生。 可能還有其他方法可以編寫此功能嗎？ 將不勝感激。

---

UPD

指令代碼：

    orderApp.directive('editableText', function(){
    return {
        restrict: 'E',
        bindToController: {
            property: '=property',
            editMode: '=editMode'
        },
        controller: 'OrderDetailsController',
        controllerAs: 'orderCtrl',
        templateUrl: '/pages/editable-text.html'
    }
});

指令模板：

<div class="col-xs-8" ng-if="!orderCtrl.editMode">{{orderCtrl.property}}</div>
<div class="col-xs-8" ng-if="orderCtrl.editMode"><input type="text" class="form-control" ng-model="orderCtrl.property"/></div>

指令用法：

 <editable-text property="orderCtrl.order.coid" edit-mode="orderCtrl.editingView"></editable-text>

我不確定我們是否真的需要傳遞edit-mode屬性。

Answer 1

您應該在指令內的此處使用bindToController: { ..scope properties.. }選項，以確保隔離的scope屬性應綁定this上下文的控制器。

指示

orderApp.directive('editableText', function(){
    return {
        restrict: 'E',
        bindToController: {
            property: '=property',
            editMode: '=editMode'
        },
        controller: 'OrderDetailsController',
        controllerAs: 'orderCtrl',
        templateUrl: '/pages/editable-text.html'
    }
});

模板

<div class="col-xs-8" ng-if="!orderCtrl.editMode">
     {{orderCtrl.property}}
</div>
<div class="col-xs-8" ng-if="orderCtrl.editMode">
   <input type="text" class="form-control" ng-model="orderCtrl.property"/>
</div>

注意：-上面的bindToController: { ..scope properties.. }選項可用於角度1.4及更高版本。

對於Angular 1.3> version＆1.4> version，您應該使用以前的方法，使bindingToController: true將范圍變量綁定到控制器上下文，並將變量保留在scope: { ...props... }

scope: {
    property: '=property',
    editMode: '=editMode'
},
bindToController: true