Question

我倾向于使用AngularJS，专门研究学习指令。想要一个表单输入指令，我可以在我的所有表单上重复使用来封装所有的锅炉板标记。虽然我无法在我的指令中使用双向绑定工作。它使用具有自己内部属性的隔离范围来存储输入字段的值。我在内部属性上设置了一个监视器，它正确地将隔离范围内的值推送到控制器范围。我想弄清楚的是如何从控制器范围获取初始值并将其设置为我的指令中的初始值。

Plunker Link：http://embed.plnkr.co/TbVB0q9DHhBCVLQ4U64W/script.js

键入第一个输入框会更改控制器范围属性，但不会更改指令值。键入第二个输入框会更改指令和控制器属性。

我知道使用属性传递初始值是可行的。但是，我希望能够通过我的指令中的ngModel引用从控制器范围属性中提取值。

回答后编辑：

对于那些不确定你为什么要通过学习指令的努力的人。特别是当Angular甚至没有使用指令时如此强大。这是一个很好的理由。

我的表单上的输入字段没有指令：

<div class="form-group">
      <label for="firstName" class="col-sm-6 col-md-4 control-label">First Name</label>
           <div class="col-sm-6 col-md-8" ng-class="{'has-error': userForm.firstName.$invalid}">
               <input type="text" id="firstName" name="firstName" placeholder="First Name" ng-model="muState.currentUser.firstName" class="form-control" required
                               popover="Cannot be blank" popover-trigger="{{{true: 'mouseenter', false: 'never'}[userForm.firstName.$invalid]}}" />
           </div>
 </div>

使用我的指令后：

<ws-form-input input-name="firstName" input-label="First Name" input-placeholder="First Name"
               ng-model="muState.currentUser.firstName"
               required input-error="Cannot be blank"></ws-form-input>

完成努力。你将在以后交易学习的头痛与维护噩梦。

Answer 1

我认为您可以使用隔离范围的'='属性表示法完全简化您的指令。

这样的事情：

<强> JAVASCRIPT

app.directive('inputDirective',function(){  
     return {
        restrict: 'E',
        replace: true,
        scope: {ngModel: '='},
        templateUrl: "directiveTemplate.html",
        require: '^form',
        link: function(scope, elem, attrs, ctrl){
          scope.form = ctrl;

          scope.required = false;
          // If attribute required exists
          if (attrs.required !== undefined) {                    
              // ng-required takes a boolean which is read from this scope variable
              scope.required = true;
          }
        }
     };
});

HTML DIRECTIVE

<div>
<input type="text" id="directiveInput" 
       ng-model="ngModel" class="form-control" ng-required="required"/>

<br/>
Isolated Scope value of the input box: {{ngModel}}
</div>

请参阅UPDATED PLUNKER

Answer 2

您必须实施ngModel.$render，请参阅参考here。

指令中的以下代码就足够了：

scope.ngModel.$render = function() {
    scope.inputBinding = scope.ngModel.$viewValue;
};

表单输入指令与隔离范围的双向绑定

2 个答案: