javascript - 为什么ng-click不起作用？

我写了一个指令来禁止ng-disabled，因为我只能使用1.1.5版本的angularjs，它不提供ng-disabled，所以

tableApp.directive('myDisabled', function($compile) {
return {
  restrict: 'A',
  replace: true,
  scope: {
    myDisabled: '='
  },
  link: function(scope, element, attrs) {
    var test = scope.$eval(attrs.myDisabled);
    console.log(test);
    scope.$watch(attrs.myDisabled, function (test) {
      if (test) {
        element.attr();
      }
      else {
        element.attr('disabled', 'false');
      }
    });
  }
};
});

html代码：

<html ng-app="tableApp">
  <head></head>
  <body>
    <div ng-controller="TableCtrl">
      <input ng-model="page"/>
      <button class="btn btn-primary" ng-click="previouspage()" my-disabled="page <=1">上一页</button>
    </div>
 </body>
</html>

但是为什么我单击此按钮却无法调用函数previouspage()

这是我的angularjs代码

var tableApp = angular.module('tableApp', [], function ($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] =
         'application/x-www-form-urlencoded;charset=utf-8';
});

tableApp.directive('myDisabled', function($compile) {
return {
  restrict: 'A',
  replace: true,
  scope: {
    myDisabled: '='
  },
  link: function(scope, element, attrs) {
    var test = scope.$eval(attrs.myDisabled);
    console.log(test);
    scope.$watch(attrs.myDisabled, function (test) {
      if (test) {
        element.attr();
      }
      else {
        element.attr('disabled', 'false');
      }
    });
    $compile(attrs);
  }
};
});

tableApp.controller('TableCtrl', function ($scope, $http) {

$scope.page = 1;
$scope.getCr = function getCr(later) {
  var url = '/cms/copyright/find';
  var request = $http({
    method: 'get',
    url: url,
    params: {
      page_length: 25,
      start: ($scope.page - 1) * 25,
      s: ''
    }
  });

  request.then(function (data) {
    if (data.data.result == 'OK') {
      console.log(data.data);
      $scope.copyright = data.data;
      if (later != undefined) {
        later();
      }
    }
  });
};

$scope.nextpage = function nextpage() {
  $scope.page += 1;
  $scope.getCr();
};

$scope.onepage = function onepage() {
  $scope.page = 1;
  $scope.getCr();
};

$scope.previouspage = function previouspage() {
  $scope.page -= 1;
  $scope.getCr();
};

$scope.setPos = function setPos(index, holder_id) {
  var pos = window.prompt("请输入排序位置", $scope.copyright.items[index].pos);
  console.log(pos);
  if (pos != null && pos != "" && parseInt(pos) > 0) {
    var a = 'holder_id=' + holder_id + '&pos=' + pos;
    $http.post('/cms/copyright/top', a).then(function (data) {
      data = data.data;
      if (data.result == 'OK') {
        $scope.getCr(function () {
          $scope.copyright.items[index].change = true;
        });
      } else {
        alert(data.result);
      }
    });
  }

  console.log($scope.copyright.items[index]);
};

$scope.getCr();
});

最佳答案

您的问题与$scope有关。

当您在指令中显式创建隔离范围（使用范围：{}）时，您将无法直接访问父范围。如果您不这样做，那么这样做就没有问题。

简而言之，只需在HTML模板中将ng-click="previouspage()"更改为ng-click="$parent.previouspage()"。

此处的相关标签：http://plnkr.co/edit/WRflPF

您还可以重构指令的link函数并删除不必要的属性。因此指令可能是：

app.directive('myDisabled', function () {
  return {
    restrict: 'A',
    scope: {
      myDisabled: '='
    },
    link: function(scope, element) {
      scope.$watch('myDisabled', function (val) {
        element.attr('disabled', val);
      });
    }
  };
});

关于javascript - 为什么ng-click不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26459708/