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

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