添加ngModel輸入一個指令

Question

我有一個輸入元素，我想使用自定義指令將ngModel和ngClass綁定到它，但我遇到了一些麻煩。

我有什麼：

<input type="text" myDirective="PropertyFromScope" /> 

我要的是結果：

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" /> 

我試圖避免使用模板，因爲我想該指令與任何輸入標籤的工作。

這是我走到這一步：

angular.module('customDirectives', []) 
.directive('myDirective', function() { 
    var linker = function (scope, element, attrs) { 
     attrs.$set('ngModel', attrs.myDirective); 
     attrs.$set('ngClass', '{\'class\' : MethodFromScope}'); 
    } 
    return { 
     restrict: 'A',   
     link: linker 
    } 
}); 

這裏有一個的jsfiddle：http://jsfiddle.net/Q8QJJ/

Answer 1

你是不是想做到這一點？

很簡單的解決方案：

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A',   
     compile: function(element, attrs) { 
      element.attr('ng-model', attrs.myDirective); 
      element.removeAttr("my-directive"); 
      element.attr('ng-class', '{\'class\' : testFunction()}'); 
      return { 
       pre: function preLink(scope, iElement, iAttrs, controller) { }, 
       post: function postLink(scope, iElement, iAttrs, controller) { 
       $compile(iElement)(scope); 
       } 
      } 
     } 
    } 
}); 

這裏是一個小提琴http://jsfiddle.net/V9e9M/

Answer 2

我無法得到這個在編譯功能工作（它添加的屬性，但它似乎並沒有注意到他們）。然而，這種鏈接功能似乎工作：

myApp.directive('myDirective', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var wrappedElement = angular.element(
       '<input type="' + attrs.type + '" ng-model="' 
       + attrs.myDirective + '">'); 
      element.replaceWith(wrappedElement); 
      $compile(wrappedElement)(scope); 
     } 
    } 
}); 

Fiddle

注：我忘了補充納克級，但我相信，如果NG-樣板工程，納克級應該工作。

更新：

這是一個使用編譯功能的版本：

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     compile: function (tElement, tAttrs) { 
      // for some unknown-to-me reason, the input must 
      // be wrapped in a span or div: 
      var tplElement = angular.element('<span><input></span>'); 
      var inputEl = tplElement.find('input'); 
      inputEl.attr('type', tAttrs.type); 
      inputEl.attr('ng-model', tAttrs.myDirective); 
      tElement.replaceWith(tplElement); 
     } 
    }; 
}); 

Fiddle

Answer 3

我登陸此頁面上有一個類似的問題，有一個自定義指令結合的ngModel 。問題是幾年前，但也許我的解決方案將幫助其他人。

首先，在index.html中，我使用了我的自定義指令和一些構成的屬性。請注意html中的破折號。屬性值是我想在指令中使用的。

index.html 

<div> 
    <form name="userInfo"> 
     <my-custom-directive for-model="ctrl.userInput" 
          for-label="Enter User Info" 
          for-other="more info for the directive"> 
     <my-custom-directive> 
    </form> 
</div> 
// check to see the binding. 
{{ ctrl.userInput }} 

接下來，在partial.html，我要設置一些默認值時看到的指令是否工作正常，當我看到的默認值。

partial.html 

<div class="form-group"> 
    <label>blankLabel</label> 
    <input type="text" 
      class="form-control" 
      ng-model="modelBlank"> 
</div> 

該指令需要一些不同的語法，這可能是最常見的問題。我喜歡定義一個變量，因爲我可能會分配多個屬性。然後在變量上調用.attr（）並傳遞想要應用的新信息。在這種情況下，字面意思是'ng-model'和在index.html中設置的自定義屬性的值。

directive.js 

.directive('myCustomDirective', function() { 
    return { 
     templateUrl: 'partial.html', 
     compile: function (element, attributes) { 
      // Find the right element in the partial and assign a variable 
      var inputTag = element.find('input'); 
      // use .attr() on the variable and pass it two arguments. 
      inputTag.attr('ng-model', attributes.forModel); 
      // Find a different element in the partial and replace the text. 
      var labelTag = element.find('label'); 
      labelTag.html(attributes.forLabel); 
     } 
    }; 
}) 

您可以使用控制檯。日誌（元素），但它會產生很多信息。最好在頁面加載後檢查元素，以查看ng模型設置爲自定義值。如果連接正確，index.html頁面上的{{ctrl.userInput}}應顯示輸入到表單中的文本。

這是一個大量的工作，但現在myCustomDirective可以用不同的方式在傳遞中重複使用：

<my-custom-directive for-model="ctrl.userName" 
        for-label="Enter Your Name:" 
        for-other="more info for the directive"> 
<my-custom-directive> 
<my-custom-directive for-model="ctrl.userSelection" 
        for-label="Make a selection:" 
        for-other="more info for the directive"> 
<my-custom-directive> 

個人而言，我從來沒有遇到過的問題添加屬性或角指令用這種方法，其中包括的東西像uib-typeahead。請記住觀察html和javascript之間的語法差異。