角指令範圍變量未定義

我試圖訪問link我的範圍變量，但他們似乎不確定角指令範圍變量未定義

/** @ngInject */ 
function tablePagination() { 
    return { 
    restrict: 'E', 
    template: require('./tablePagination.html'), 
    scope: { 
     currentPage: '=', 
     totalPages: '=', 
     totalCount: '=', 
     perPage: '=' 
    }, 
    link: function (scope) { 
     console.log(scope.currentPage, scope) // scope.currentPage is undefined 
    } 
    } 
} 

// controller for authlogin 
module.exports = tablePagination

我使用@而不是=也試過，改變了結合使用{{}}但它仍然不確定。我可以使用$observe，但我想一次獲取多個屬性的值來做一些計算。什麼是最好的方法來做到這一點？

HTML代碼

<table-pagination 
    current-page="$ctrl.tableMeta.currentPage" 
    total-count="$ctrl.tableMeta.totalCount" 
    total-pages="$ctrl.tableMeta.totalPages" 
    per-page="$ctrl.tableMeta.perPage"></table-pagination>

更新：不知從$ctrl.tableMeta它，因爲指令沒有得到更新值是從API來/異步

解決方案！：哦，我發現我錯了，我需要使用$watch否則它得到舊值默認情況下是不確定的，因爲它不是通過API設置異步尚未

scope.$watch('currentPage',() => { 
    scope.start = (scope.currentPage - 1) * scope.perPage + 1 
    scope.end = Math.min(scope.currentPage * scope.perPage, scope.totalCount) 
})

來源

2016-12-23 Jiew Meng

提供你的HTML時，你用你的指令。 – Curiousdev

'currentPage'需要從HTML傳遞！ –

你可以分享你的tablePagination.html嗎？ –

它只是一個例子，我希望它會清除一些事情了。

gridPagination.html

<label>current Page:</label><span>{{ currentPage }}</span> 
<br> 
<label>Total Pages:</label> {{ totalPages }}

app.js

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

mainController.js

app.controller('mainController', ['$scope', function($scope) { 
    $scope.title = 'My Grid'; 
}]);

gridDirective.js

app.directive('grid', gridPagination); 

function gridPagination() { 
    return { 
    restrict: 'E', 
    scope: { 
     currentPage: '=', 
     totalPages: '=', 
     totalCount: '=', 
     perPage: '=' 
    }, 
    templateUrl: 'gridPagination.html', 
    link: function(scope, element, attrs) { 
     console.log(scope.currentPage); 
     console.log(scope.totalPages); 
     console.log(scope.totalCount); 
     console.log(scope.perPage); 
    } 
    }; 
};

的index.html

<html> 
    <head> 
    <link rel="stylesheet" href="main.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
    </head> 
    <body ng-app="myApp"> 
    <div ng-controller="mainController"> 
     <grid current-page="3" total-pages= "30" total-count="10" per-page="2"></grid> 
    </div>   
    <script src="app.js"></script> 
    <script src="mainController.js"></script> 
    <script src="gridDirective.js"></script> 
    </body>  
</html>

plunker

來源

2016-12-23 10:08:29 MMK

我發現這個方法可行，但是一旦我使用了一個動態屬性'current-page = $ ctrl.tableMeta.currentPage'。我認爲這個指令在獲取API設置的時候沒有獲得currentPage的值？ –

好吧，我發現我需要使用'$ watch' –

大@JiewMeng – MMK

角指令範圍變量未定義

回答

相關問題