如何在 AngularJS 自定义指令中指定模型？答案

【问题标题】：How to specify model in AngularJS custom directives?如何在 AngularJS 自定义指令中指定模型？
【发布时间】：2015-11-10 08:37:11
【问题描述】：

我想使用 AngularJS 自定义指令生成以下代码：

<body ng-app="">
    <label>Number 1: <input type="number" ng-model="a2"/></label> +<br/>
    <label>Number 2: <input type="number" ng-model="b2"/></label> =<br/>
    <hr/>
    <span>Total: {{a2+b2}}</span>
</body>

因此，我写了如下代码：

<script>
    var app = angular.module('my-total', []);
    app.directive('myNumber', function() {
        return {
            restrict: 'E',
            scope: {
                myLabel: '=',                        
                ngModel: '=',                        
            },
            template: '<label>{{myLabel}}: <input type="number" value="{{ngModel}}"/></label>',
        }
    });
</script>
<body ng-app="my-total">
    <my-number my-label="'Number 1'" ng-model="a1"/></my-number> +<br/>
    <my-number my-label="'Number 2'" ng-model="b1"/></my-number> =<br/>
    <hr/>
    <span>Total: {{a1+b1}}</span>
</body>

当用户输入数字时，总数不显示。

我怎样才能让它工作？我的意思是，如何将模型变量“a1”和“b1”从指令中传递出去？

【问题讨论】：

标签： javascript angularjs data-binding angularjs-directive

【解决方案1】：

您应该更改模板中的input 字段，它应该使用ng-model="ngModel" 而不是value="{{ngModel}}"

app.directive('myNumber', function() {
    return {
        restrict: 'E',
        scope: {
            myLabel: '=',                        
            ngModel: '=',                        
        },
        template: '<label>{{myLabel}}: '+
                      '<input type="number" ng-model="ngModel"/>'+ //<-- change here
                   '</label>',
    }
});

【讨论】：

【解决方案2】：

嘿，请找到工作的fiddle。

angular.module('test', [])
.directive('myDir', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: '<label>Enter value: '+
                  '<input type="number" ng-model="ngModel"/>'+
               '</label>',            
    };
});

【讨论】：