AngularJS指令 - 動態輸入名稱綁定

Question

我正在嘗試學習更多關於AngularJS的指令，並遇到這種情況。我想製作一個可以重複使用的是 - 否的無線電控制。我已經獲得了大部分的方式 - 我認爲 - 但需要朝正確的方向推進。

我有這樣的指令：

app 
    .directive('yesno', function() { 
    'use strict'; 

    var config; 

    config = { 
     replace: true, 
     require: 'ngModel', 
     restrict: 'E', 
     scope: { 
     field: '=', 
     model: '=' 
     }, 
     templateUrl: 'views/yesno.html' 
    }; 

    return config; 
    }); 

...和模板看起來是這樣的：

<fieldset class="yesno"> 
    <input id="{{field}}-yes" name="{{field}}" ng-model="model" type="radio" value="yes" /> 
    <label for="{{field}}-yes">Yes</label> 
    <input id="{{field}}-no" name="{{field}}" ng-model="model" type="radio" value="no" /> 
    <label for="{{field}}-no">No</label> 
</fieldset> 

...和我使用它像這樣（簡化）：

<form name="person"> 
    <yesno field="'happy'" model="happy" /> 
</form> 

不幸的是，我所得到的person對象是屬性{{field}} ins像我想要的happy。我一直告訴自己，像我正在嘗試的事情是可能的，我只需要找到它;但是什麼。

請幫忙。

更新

謝謝你，@HackedByChinese，幫助一點，但仍然不能令人信服。問題是，我確實需要雙向綁定，以便將收音機的值填充到父範圍中;相反，當我檢查person對象時，它有一個{{field}}屬性，而不是happy屬性。

我想，這只是一些AngularJS不看支持：

AngularJS: Fields added dynamically are not registered on FormController

...和：

https://github.com/angular/angular.js/issues/1404

Answer 1

那麼如果你只是想field要包含輸入的字符串值，可以使用該屬性的前綴@來指示它是文本綁定（它將解釋attri的值bute作爲文字文字）。

scope: { 
    field: '@', 
    model: '=' 
    }, 

Click for demo。另一方面，如果需要將field綁定到提供給該屬性的表達式的值（例如，要綁定到父範圍的屬性），則需要將模板HTML更改爲評估field（簡單地{{field()}}），因爲它們將是功能。這裏的區別在於，如果人們想直接提供字符串值，他們需要像引用原始示例一樣將其放入引號中。我還建議單向綁定，因爲你的指令似乎不太可能修改父範圍值，因爲它只是一個名稱。爲此，使用&前綴。

scope: { 
    field: '&', 
    model: '=' 
    }, 

<fieldset class="yesno"> 
    <input id="{{field()}}-yes" name="{{field()}}" ng-model="model" type="radio" value="yes" /> 
    <label for="{{field()}}-yes">Yes</label> 
    <input id="{{field()}}-no" name="{{field()}}" ng-model="model" type="radio" value="no" /> 
    <label for="{{field()}}-no">No</label> 
</fieldset> 

Click for second demo.

Answer 2

我遇到了同樣的問題。最簡單的解決方案是將名稱值直接注入到模板字符串中。

只要您不需要綁定名稱值（即在指令的生命週期內不需要更改），它就可以工作。考慮到通常使用name屬性的方式，我認爲這個約束不是問題。

app 
    .directive('yesno', function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope: { 
     field: '@', 
     model: '=' 
     }, 
     template: function(element, attrs) { 
     return '<fieldset class="yesno"> \ 
      <input id="{{field}}-yes" name="{{field}}" ng-model="model" type="radio" value="yes" /> \ 
      <label for="{{field}}-yes">Yes</label> \ 
      <input id="{{field}}-no" name="{{field}}" ng-model="model" type="radio" value="no" /> \ 
      <label for="{{field}}-no">No</label> \ 
      </fieldset>'.replace('{{field}}', attrs.field, 'g'); 
     } 
    }; 
}); 

由於內聯html，這個解決方案有點麻煩。如果你想從文件加載的模板在原來的問題，你可以做這樣的：

app 
    .directive('yesno', ['$http', '$templateCache', '$compile', 
    function ($http, $templateCache, $compile) { 
    return { 
     restrict: 'E', 
     scope: { 
     field: '@', 
     model: '=' 
     }, 
     link: function(scope, element) { 
     $http.get('views/yesno.html', {cache:$templateCache}) 
      .then(function(response) { 
      var content = angular.element(response.data.replace('{{field}}', scope.field, 'g')); 
      element.append(content); 
      $compile(content)(scope); 
      }); 
     } 
    }; 
}]);