Question

如标题所示。我想在指令模板中增加值。

我试过了：

var ngApp = angular.module("ngApp", []);

ngApp.controller("AppCtrl", function(){
  var app = this;
  app.counter = 1;
  app.foo = function(){
    app.counter++;
    return app.counter;
  }
});

ngApp.directive("box", function(){
  return {
    restrict: "E",
    template: "<div>BOX - {{app.foo()}}<div>"
  }
});

但它不起作用。有什么想法吗？

Answer 1

你想做什么？第一次编译指令时增加值？如果是这样，那么你可以这样做：

ngApp.directive("box", function(){
  function ctrl($scope) {
    $scope.counter = $scope.app.foo();
  }
  return {
    restrict: "E",
    scope: true,
    controller: ctrl
    template: "<div>BOX - {{counter}}<div>"
  }
});

Answer 2

尝试这样，你不需要返回任何值，但是你应该调用foo函数，例如在你需要它的代码中点击或者其他地方

var ngApp = angular.module("ngApp", []);
ngApp.controller("AppCtrl", function(){
  var app = this;
  app.counter = 1;
  app.foo = function(){
    app.counter++;  
  }
});

ngApp.directive("box", function(){
  return {
    restrict: "E",
    template: "<div ng-click='app.foo()'>BOX - {{app.counter}}<div>"
  }
});

Answer 3

您可以将控制器置于指令内：

var ngApp = angular.module("ngApp", []);

ngApp.directive("box", function(){
  return {
    restrict: "E",
    controllerAs: 'app',
    controller: function(){
       var app = this;
       app.counter = 1;
       app.foo = function(){
          app.counter++;
       }
    },
    template: "<div>BOX - {{app.foo()}}<div>"
  }
});

AngularJS - 指令模板内的增量值

3 个答案: