如何綁定到沒有範圍的指令內的ng-model？

Question

我想創建一個包裝表單元素（input，textarea，select等）並綁定到ng模型的指令。

這裏的用法：

<div ng-controller="formController"> 
    <field 
      type="text" 
      ng-model="model.CellPhoneNumber" 
      label="Cell phone" 
      mini-help="Sample: 123412341234" 
      required="please give us your number" 
      numeric 
      cellPhone="cell phone number is invalid" /> 
    <div>{{ model.CellPhoneNumber }}</div> 
</div> 
<script> 
    app.cp.register('formController', ['$scope', function ($scope) { 

    }]); 
</script> 

這是我的指令：

app.directive('field', function() { 
     return { 
      restrict: 'E', 
      replace: 'true', 
      scope: false, 
      require: 'ngModel', 
      template: '<div class="field">' + 
          '<label ng-if="label">{{ label }}</label>' + 
          '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel" />' + 
          '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' + 
          '<span class="messages">' + 
           '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' + 
          '</span>' + 
         '</div>', 
      link: function (scope, element, attributes, ngModel) { 
       scope.label = attributes.label; 
       scope.miniHelp = attributes.miniHelp; 
       scope.type = attributes.type; 
       scope.required = attributes.required; 
      } 
     }; 
    }); 

但是，這是行不通的。我堅持綁定ng模型。我知道我可以通過範圍切換到子範圍：{}，並且事情可行。但我需要範圍：錯誤。

這是一個很好的示例。但是我找不到範圍內的示例：false。

Dynamic ng-model binding inside a directive

Answer 1

您可以隨時使用的屬性在你的角度指令

Answer 2

你非常接近你想要的解決方案。 link函數的第四個參數是ngModelController，它與ngModel不同。你的問題是，你用它作爲計劃ngModel。所有你需要做的只是一些小的改變。

首先，您需要將ngModelController綁定到您的scope。然後，代替ng-model="ngModel"，您綁定$viewValue，如下所示：ng-model="ngModel.$viewValue"。最後，您需要創建手錶，以便允許您的指令field更改ngModel的值，否則它將是單向的。

這裏的工作代碼：

angular 
 
    .module('myApp', []) 
 
    .directive('field', function() { 
 
    return { 
 
     restrict: 'E', 
 
     replace: 'true', 
 
     scope: false, 
 
     require: 'ngModel', 
 
     template: '<div class="field">' + 
 
     '<label ng-if="label">{{ label }}</label>' + 
 
     '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel.$viewValue" />' + 
 
     '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' + 
 
     '<span class="messages">' + 
 
     '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' + 
 
     '</span>' + 
 
     '</div>', 
 
     link: function(scope, element, attributes, ngModel) { 
 
     scope.label = attributes.label; 
 
     scope.miniHelp = attributes.miniHelp; 
 
     scope.type = attributes.type; 
 
     scope.required = attributes.required; 
 

 
     scope.ngModel = ngModel; 
 
     scope.$watch(function() { 
 
      return ngModel.$viewValue; 
 
     }, function(newValue) { 
 
      ngModel.$setViewValue(newValue); 
 
      ngModel.$render(); 
 
     }); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-init="myModel = 'qwe'"> 
 
    <field type="text" ng-model="myModel" label="Cell phone" mini-help="Sample: 123412341234" required="please give us your number" numeric cellPhone="cell phone number is invalid"></field> 
 

 
    <input type="text" ng-model="myModel"> 
 
    <p>{{ myModel }}</p> 
 
</div>