在指令中观看 ng-model [英] watch ng-model inside directive

问题描述

我有以下指令:

directive('myInput', function() {返回 {限制:'AE'，范围: {ID: '@'，标签: '@'，类型: '@'，值:'='},templateUrl: '指令/dc-input.html',链接:函数(范围，元素，属性){scope.disabled = attrs.hasOwnProperty('disabled');scope.required = attrs.hasOwnProperty('required');scope.pattern = attrs.pattern ||'.*';}};});

使用以下模板:

<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 ng-show="saved" class="alert alert-success">用户已更新.

<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">保存</button>

</表单>

哪个有这个控制器:

controller('UserDetailsCtrl', function($scope, $stateParams, User) {$scope.user = User.get({userId: $stateParams.id});/*** 更新此范围内的当前用户.*/$scope.update = function() {console.log($scope.user);$scope.user.$update({userId: $scope.user.id}).then(function(results) {$scope.saved = true;});};}).

表单呈现良好，但是当我单击 Save 按钮时，用户值永远不会更新.

如何在控制器范围内的 myInput 指令中使用更新后的值?

解决方案

这是基本问题.您的 ng-model 是一个原始对象，并且只在一个方向上绑定......如果父对象发生更改，它将更新，但由于它是原始对象，它不携带对父对象的引用......只是价值.因此更新原语不会更新其原始值来自的父对象

<块引用>

angular 中的基本规则...在 ng-model 中总是有一个点

这是一个将主要的 user 对象传递给指令范围的解决方案，以及该对象用于每个输入的属性

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

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

app.directive('myInput', function() {返回 {范围: {/* 其他道具*/场地: '@'，模型:'='/* 现在在作用域内有对父对象的引用*/},......};});

然后在输入的标记中将使用 [] 符号来获得我们的点:

演示

为了使用角度验证，您可能必须在指令中require ngModel 控制器或使用嵌套形式

I have the following 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 || '.*';
        }
    };
});

with the following template:

<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.

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

解决方案

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

Cardinal rule in angular...always have a dot in 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*/
        },
       ......
    };
});

Then in markup for an input will use [] notation in order to get our dot in:

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

DEMO

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

这篇关于在指令中观看 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！