javascript - AngularJS 绑定(bind) Ng-Model Inside 指令具有错误的属性名称

Question

这是对上一个问题的跟进。我对自定义指令的呈现和页面呈现时 DOM 中的实际输出有一些疑问。

这是我的指令的定义:

angular.module('moduleName)
    .directive('selectValue', ['$timeout', function($timeout) {

    const directive = {
        restrict: 'E',
        replace: true,
        scope: {
            controlId: '@',  
            model: '=?'
        },
        controller: 'selectValueCtrl',
        templateUrl: 'template.html'

    };

    return directive;
}

这是外化模板:

<!-- template.html -->
<input id="{{controlId}}" name="{{controlId}}" placeholder="Enter Value" 
       type="text" ng-model="model" />

给定指令的以下用法:

<select-value controlId="selectValue" model="data.value"></selectValue>

为什么会呈现如下:

<input id="selectValue" ng-model="model" />

代替:

<input id="selectValue" ng-model="data.value" />

我的代码是否有误，或者这是预期的行为？

Answer 1

{{controlId}} - 这是一个插值，Angular 应该计算大括号后面的表达式。这就是为什么您得到 id="selectValue" 而不是 id="{{controlId}}"

ng-model="model" 这只是一个由 Angular 在后台处理的双向绑定(bind)，但 Angular 在这种情况下不会更改模板。 Angular 应该知道绑定(bind)了什么模型，值在幕后传输。