内部指令手表NG-模型 [英] watch ng-model inside directive

问题描述

我有以下指令：

directive('myInput', function() {
    return {
        restrict: 'AE',
        scope: {
            id: '@',
            label: '@',
            type: '@',
            value: '='
        },
        templateUrl: 'directives/dc-input.html',
        link: function(scope, element, attrs) {
            scope.disabled = attrs.hasOwnProperty('disabled');
            scope.required = attrs.hasOwnProperty('required');
            scope.pattern = attrs.pattern || '.*';
        }
    };
});

与下面的模板：

<div class="form-group">
    <label for="input-{{id}}" class="col-sm-2 control-label">{{label}}</label>
    <div class="col-sm-10" ng-switch on="type">
        <textarea ng-switch-when="textarea" ng-model="value" class="form-control" id="input-{{id}}" ng-disabled="disabled" ng-required="required"></textarea>
        <input ng-switch-default type="{{type}}" ng-model="value" class="form-control" id="input-{{id}}" ng-disabled="disabled" ng-required="required" pattern="{{pattern}}"/>
    </div>
</div>

它是利用这种形式：

It is used by this form:

<form ng-controller="UserDetailsCtrl" role="form" class="form-horizontal">
    <div ng-show="saved" class="alert alert-success">
        The user has been updated.
    </div>
    <my-input label="First name" value="user.firstName" id="firstName"></my-input>
    <my-input label="Last name" value="user.lastName" id="lastName"></my-input>
    <my-input label="Email" value="user.email" id="email" type="email" disabled></my-input>
    <my-input label="Password" value="user.password" id="password" type="password"></my-input>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button ng-click="update()" class="btn btn-default">Save</button>
        </div>
    </div>
</form>

其中有此控制器：

Which has this controller:

controller('UserDetailsCtrl', function($scope, $stateParams, User) {
    $scope.user = User.get({userId: $stateParams.id});
    /**
     * Update the current user in this scope.
     */
    $scope.update = function() {
        console.log($scope.user);
        $scope.user.$update({userId: $scope.user.id}).then(function(results) {
            $scope.saved = true;
        });
    };
}).

的形式呈现罚款，但是当我点击保存按钮，永远不会更新用户的值。

The form is rendered fine, but when I click the Save button, the user values are never updated.

我怎么能在控制器范围内使用更新的值从myInput指令中？

How can I use the updated values from within the myInput directive in the controller scope?

推荐答案

下面是基本的问题。你的 NG-模型是一个原始的，只在一个方向上束缚......如果父对象改变了它会更新，但因为它是原始它不携带参考父对象...只是价值。因此，更新的原始不会更新父对象，它的初始值是从哪里来的。

Here's the basic problem. Your ng-model is a primitive and is only being bound in one direction...it will update if parent object is changed, but since it is primitive it does not carry reference to parent object...just value. Thus updating the primitive does not update parent object that it's original value came from

基本规则... 总是在NG-model的点

下面是一个解决方案，将通过主用户对象指令范围，以及该对象的使用每个输入属性

Here's a solution that will pass the main user object to directive scope, as well as the property of that object to use for each input

<my-input id="firstName" model="user" field="firstName" label="First name"></my-input>

现在需要从控制器传递对象到指令范围：

Now need to pass the object from controller into the directive scope:

app.directive('myInput', function() {
    return {  
        scope: {
           /* other props*/
            field: '@',
            model:'='/* now have reference to parent object in scope*/
        },
       ......
    };
});

然后在标记为输入将使用 [] 符号，以获得我们的点在

<input  ng-model="model[field]".../>

<大骨节病> 演示

为了使用角度验证你可能将不得不要求在指令中的 ngModel 控制器或使用嵌套形式

In order to use angular validation you will likely have to require the ngModel controller in your directive or use nested form

这篇关于内部指令手表NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！