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属性不会更新。

在编辑属性之前看起来像：

启用编辑模式并更改值：

关闭编辑模式，我们看到旧值：

我是否需要同步控制器值和指令范围？我认为使用双向绑定它应该自动发生。可能还有其他方法来编写此功能吗？将不胜感激任何帮助。

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>

我不确定我们是否真的需要传递编辑模式属性。

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＆gt;版本＆amp; 1.4＆gt;你应该使用bindingToController: true将范围变量绑定到控制器上下文＆amp;确保将变量保留在scope: { ...props... }

中

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

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

1 个答案: