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

我想用一個AngularJS自定義指令生成以下代碼：如何在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」傳遞出指令？

來源

2015-11-10 user3459257

你應該改變你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>', 
    } 
});

來源

2015-11-10 08:39:13

嘿請找工作fiddle的一樣。

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

來源

2015-11-10 09:55:55

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

回答

相關問題