如何在角度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();
      });
    }
  };

}）;