如何在角度js中使用带有指令的ng-model

Question

我有这个指令来增加和减少这样的变量

angular.module('shopping')
    .directive('myDir', function () {
        return {
            restrict: 'AE',
            scope: {
                dirModel: '='
            },
            template: '<div><button ng-click="decrement()">-</button>' +
                '<div ng-model="dirModel">{{ value }}</div>' +
                '<button ng-click="increment()">+</button></div>',
            link: function (scope, iElement, iAttrs) {
                scope.increment = function () {
                    scope.value += 20;
                }
                scope.decrement = function () {
                    scope.value -= 20;
                }
            }
        };
    });

我这样用

<my-dir dirModel="user.interval"></my-dir>

现在，当我单击编辑表单时，我的作用域已经有user.interval = 30那么就不会设置。

对于新表格，它可以正常工作

Answer 1

工作： http ： //plnkr.co/edit/jjIgVA？p = preview

你做错了什么：

• 在视图中，您需要将dirModel设置为dir-model

• 在指令中你需要等待dirModel编译然后将其设置为scope.value（你永远不会声明它，你可能会尝试在div中错误地使用ng-model）

app.directive（'myDir'，function（）{

return {
    restrict: 'AE',
    scope: {
      dirModel: '='
    },
    template: '<div><button ng-click="decrement()">-</button><div>{{ value }}</div><button ng-click="increment()">+</button></div>',
    link: function (scope, iElement, iAttrs) {
      scope.increment = function () {
          scope.value += 20;
      }
      scope.decrement = function () {
          scope.value -= 20;
      }

      // wait for variable to compile, set it to your value
      var watcher = scope.$watch('dirModel', function() {
        if(scope.dirModel === undefined) return;
        scope.value = scope.dirModel;
        watcher();
      });
    }
  };

}）;