为什么ng-click不起作用？

我写一个指令IMPL NG-禁用，因为我正好可以利用angularjs哪个版本是1.1.5，it't不能提供NG-禁用，因此为什么ng-click不起作用？

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

来源

2014-10-20 ipaomian

你如何申报'|上一页（）'在你的'controllers'范围内？ – 2014-10-20 06:38:20

是的，我声明它在我的控制器'$ scope.previouspage = function previouspage（）{ $ scope.page - = 1; $ scope.getCr（）; };' – ipaomian 2014-10-20 06:39:09

你能提供一些你的标记的细节或创建一个小提琴吗？ – 2014-10-20 06:50:52

您的问题与$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); 
     }); 
    } 
    }; 
});

来源

2014-10-20 07:13:20

cool！但它是一个新问题。为什么页面大于1，但按钮也被禁用？ – ipaomian 2014-10-20 07:21:16

我细化了我的活塞，也许它可以帮助你找出答案。仅当页面<= 1时禁用按钮。请参阅script.js中的精修指令（或在上面的答案中）。 – 2014-10-20 07:24:01

问题是指令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'); 
     } 
    }); 
    } 
}; 
});

来源

2014-10-20 07:14:10

为什么ng-click不起作用？

回答

相关问题