具有隔离范围的表单输入指令的两种方式绑定

Question

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

Plunker 链接：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 指令

<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;
};