Javascript 如何在AngularJS自定义指令中指定模型？_Javascript_Angularjs_Data Binding_Angularjs Directive

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

javascript angularjs data-binding

Javascript 如何在AngularJS自定义指令中指定模型？,javascript,angularjs,data-binding,angularjs-directive,Javascript,Angularjs,Data Binding,Angularjs Directive,我想使用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/> <

我想使用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>


数字1:+

第2位：=


总计：{a2+b2}

因此，我编写了以下代码：

<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>


var app=angular.module（'my-total'，[]）；
app.directive（'myNumber'，function（）{
返回{
限制：'E'，
范围：{
myLabel:“=”，
ngModel:“=”，
},
模板：“{myLabel}}:”，
}
});
+

=


总计：{a1+b1}

当用户键入数字时，不会显示总数

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

您应该更改模板中的

输入

字段，它应该使用

ng model=“ngModel”

而不是

value=“{{ngModel}}”

app.directive（'myNumber'，function（）{
返回{
限制：'E'，
范围：{
myLabel:“=”，
ngModel:“=”，
},
模板：“{myLabel}}:”+
“”+/您应该更改模板中的输入
字段，它应该使用ng model=“ngModel”
而不是value=“{{ngModel}}”

app.directive（'myNumber'，function（）{
返回{
限制：'E'，
范围：{
myLabel:“=”，
ngModel:“=”，
},
模板：“{myLabel}}:”+
''+/嘿，请找到为同一家公司工作的人
angular.module('test', [])
.directive('myDir', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: '<label>Enter value: '+
                  '<input type="number" ng-model="ngModel"/>'+
               '</label>',            
    };
});

角度模块（'test'，[]）
.directive（'myDir'，function（）{
返回{
限制：'E'，
范围：{
ngModel:“=”
},
模板：“输入值：”+
''+
'',            
};
});
嘿，请找到为同一家公司工作的人
angular.module('test', [])
.directive('myDir', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: '<label>Enter value: '+
                  '<input type="number" ng-model="ngModel"/>'+
               '</label>',            
    };
});

角度模块（'test'，[]）
.directive（'myDir'，function（）{
返回{
限制：'E'，
范围：{
ngModel:“=”
},
模板：“输入值：”+
''+
'',            
};
});