Угловые переменная директива сферы неопределенные

Я пытаюсь получить доступ к моей области видимости переменным в 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>

UPDATE: Интересно, если его, потому что директива не получает обновленные значения от $ctrl.tableMeta, который приходит из API/Async

РЕШЕНИЕ!: О, я обнаружил, моя ошибка была мне нужно использовать $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! –

можете ли вы поделиться своим столомPagination.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', например, он ломается. Я думаю, что директива не получает значение currentPage, когда оно установлено API? –

Хорошо, я обнаружил, что мне нужно использовать '$ watch' –

Great @JiewMeng – MMK

Угловые переменная директива сферы неопределенные

ответ

Смежные вопросы