Angular指令屬性沒有通過

我試圖通過爲每個元素制定指令來縮短我的表單代碼，但是我的指令沒有顯示我傳遞給它的任何內容，並且模型沒有被綁定。Angular指令屬性沒有通過

HTML：

<formstring dataBinding="project.title" dataTitle="Title" dataPlaceholder="title" />

指令：

app.directive('formstring', function() { 
    return { 
    restrict: 'AEC', 
    dataBinding: '=', 
    dataTitle: '@dataTitle', 
    dataPlaceholder: '@dataPlaceholder', 
    dataHelp: '@dataHelp', 
    templateUrl: '/app/js/directives/form/string.html', 
    }; 
});

string.html：

<div class="form-group"> 2 <label for="{{dataTitle}}" class="col-sm-2 control-label">{{dataTitle}}</label > 
    <div class="col-sm-10"> 
    <input type="text" class="form-control" id="{{dataTitle}}" placeholder="{{da taPlaceholder}}" ng-model="dataBinding"> 
    <p ng-show="dataHelp" class="help-block">{{dataHelp}}</p> 
    </div> 
</div>

項目是有一個屬性 '標題' 一個$ scope對象。

我錯過了什麼？爲什麼這會出現在沒有填入任何屬性的空白輸入中，爲什麼綁定不起作用？

來源

2014-03-26 Jason McCarrell

你還沒有明白怎麼指令配置正確。我建議你閱讀文檔，它可以幫助你更好地理解。

在此期間，這裏是你的HTML，指令代碼和模板應該是什麼樣子（也有working demonstration on Plunkr）：

HTML：

<formstring data-binding="project.title" 
      data-title="Title Demo" 
      data-placeholder="title placeholder" 
      data-help="My help text"> 
</formstring>

指令：

app.directive('formstring', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     binding: '=', 
     title: '@', 
     placeholder: '@', 
     help: '@' 
    }, 
    templateUrl: '/app/js/directives/form/string.html', 
    }; 
});

Template（string.html）：

<div class="form-group"> 
    <label for="{{title}}" class="col-sm-2 control-label"> 
     {{title}} 
    </label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="{{title}}" placeholder="{{placeholder}}" ng-model="binding"> 
     <p ng-show="help" class="help-block">{{help}}</p> 
    </div> 
</div>

來源

2014-03-26 04:18:17 GregL

你的建議沒有奏效。 –

請注意，來自每個屬性的前導'data-'將被Angular剝離，有關詳細信息，請參見[指令指南]（http://docs.angularjs.org/guide/directive#matching-directives）。 – GregL

確保更改模板，以便引用不帶'data'前綴的範圍屬性（當然還有小寫）。 – GregL

應該

<formstring data-binding="project.title" data-title="Title" data-placeholder="title" />

。

來源

2014-03-26 04:15:08

你需要改變你如何創建分離範圍：

app.directive('formstring', function() { 
    return { 
    restrict: 'AEC', 
    scope: { 
     dataBinding: '=', 
     dataTitle: '@dataTitle', 
     dataPlaceholder: '@dataPlaceholder', 
     dataHelp: '@dataHelp' 
    }, 
    templateUrl: '/app/js/directives/form/string.html', 
    }; 
});

閱讀the doc關於什麼的分離/隔離的範圍是指，因爲它對整體範圍的效果的細節。

編輯：我以前沒有注意到這個額外的問題。你的駱駝作用域屬性成爲當您使用指令（見莫賓的答案）蛇套管：

<formstring data-binding="project.title" data-title="Title" data-placeholder="title" />

在你的模板，但是，性能仍然駱駝套管，你有：

<div class="form-group"> 2 <label for="{{dataTitle}}" class="col-sm-2 control-label">{{dataTitle}}</label > 
    <div class="col-sm-10"> 
    <input type="text" class="form-control" id="{{dataTitle}}" placeholder="{{da taPlaceholder}}" ng-model="dataBinding"> 
    <p ng-show="dataHelp" class="help-block">{{dataHelp}}</p> 
    </div> 
</div>

這是因爲模板中的綁定是JSON屬性，而使用指令屬性時的屬性是XML屬性。

我對你的模板做了一些微調，比如id="{{dataTitle}}"可以很容易地打破HTML標準，要求id屬性是唯一的......你可能想用name="{{dataTitle}}"代替。 name仍然可能導致問題，但它不會'打破document.getElementById例如。

而且，我會使用ng-bind儘可能：

<p ng-show="dataHelp" class="help-block" ng-bind="dataHelp"></p>

來源

2014-03-26 04:15:19

嗯，你是對的，我應該使用一個孤立的範圍，但是即使有你提出的改變，仍然沒有出現。 –

哦。我以前沒有注意到，當xml不允許使用駝峯的情況下，因此您的視圖中的dataBinding必須在視圖中聲明爲data-binding =「」。爲了清楚起見，我會更新答案。 –

我只是在做它超級錯誤，因爲我害怕數據 - 會被保留下來，搞砸了......並且它是= P。我需要刪除數據前綴，然後按照上面Greg的建議一切工作。你的回答也很好，因爲它提醒我使用一個獨立的範圍。謝謝！ –

Angular指令屬性沒有通過

回答

相關問題