Question

我有一个指令，使用keypup来阻止任何空值，最小值为1，就像这样

.directive('numberOfUsesMustNotNull', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.bind('keyup', function($event) {
                // disallow number of uses to be zero
                if(element.val() === '' || element.val() === 0){
                  element.val(1);
                }
            });
        }
    }
});

所以我像

一样使用它

<input class="form-control numberOfUsesMustNotNull" type="number" placeholder="Qty" ng-model="qty" ng-change="updatePrice (qty)" />

在视图中

。但是如果指令被触发，updatePrice函数将不会触发。如何从指令触发控制器的$ scope.updatePrice？

Answer 1

您可以为变量执行双向绑定。在Angular文档中检查指令的双向绑定： https://docs.angularjs.org/guide/directive

在您的代码中执行以下更改：

<input class="form-control numberOfUsesMustNotNull" price="{{updatedPrice}}" ng-value="updatedPrice" type="number" placeholder="Qty" ng-model="qty" ng-change="updatePrice(qty)" />

在指令中：

.directive('numberOfUsesMustNotNull', function() {
    return {
        scope: {
          price: "="
        },
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.bind('keyup', function($event) {
                // disallow number of uses to be zero
                if(element.val() === '' || element.val() === 0){
                  scope.price = 1;
                }
            });
        }
    }
});

Answer 2

我有一个使用keypup来阻止任何空值的指令，最小值为1

为什么你需要指示？

使用edges(g)属性，您可以实现相同的目标。

min

JS：

<input type="number" ng-model="qty" ng-change="updatePrice ()" min="1"/>

无需通过.controller('testCtrl',function($scope){ $scope.updatePrice = function(){ console.log($scope.qty); } })从html.it传递qty。

Answer 3

您应该在输入字段上使用ng-model。然后，您的指令可以使用require来更改绑定到范围的实际值，而不仅仅是dom值。这将正确触发ng-change。

关于ngModel的文档：https://docs.angularjs.org/api/ng/directive/ngModel 有关要求的文件：https://docs.angularjs.org/guide/directive（在“指示通信”标题下）

从指令触发控制器中的$ scope函数

3 个答案: