Question

我写了一个指令来禁用impl ng，因为我只能使用版本为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();
});

Answer 1

您的问题与$scope。

有关

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

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

相关的plunker：http://plnkr.co/edit/WRflPF enter image description here

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

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

Answer 2

问题是指令scope。您尝试从父作用域（控制器作用域）

访问scope变量

如果您为指令禁用隔离scope，则可以使用

例如：

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');
      }
    });
  }
};
});

为什么ng-click不起作用？

2 个答案: