Question

我想使用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”传递出指令？

Answer 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>',
    }
});

Answer 2

嘿，请找到同样的工作fiddle。

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

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

2 个答案: