爲什麼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不起作用？

回答

相關問題