AngularJS 绑定的 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 在幕后处理，但 Angular 在这种情况下不会更改模板。 Angular 应该知道绑定了什么模型，值是在幕后传递的。

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

AngularJS Bound Ng-Model Inside Directive Has Wrong Attribute Name

javascript

angularjs

angularjs-directive