AngularJS：无法从CTRL范围为指令获取变量的值 [英] AngularJS: Can't get a value of variable from ctrl scope into directive

问题描述

HostingCtrl：

 函数HostingListCtrl（$范围，主机）{    Hosting.all（）。成功（功能（数据）{
        $ scope.hostings =数据;
    }）;
}
 

HTML模板：

 ＆LT;分页项目数={{hostings.length}}当前页=当前页项目的单页={{itemsPerPage}}＆GT; ＆LT; /分页＆GT;
 

指令：

  admin.directive（'分页'，函数（）{
    返回{
        限制：'E'，
        更换：真实，
        templateUrl：＆LT;％= asset_path（'角/模板/ UI / pagination.html'）％GT;，
        范围： {
            当前页：'='，
            itemsCount：'@'，
            itemsPerPage：'@'
        }，
        控制器：函数（$范围，$元，$ ATTRS）{
            的console.log（$范围内）;
            的console.log（$ scope.itemsCount）;
        }，
        链接：功能（范围，元素，ATTRS，控制器）{
        }
    };
}）;
 

我试图让在指令itemsCount变量的值保持，但是当我尝试CONSOLE.LOG它的值为空。
奇怪的是，整个CONSOLE.LOG范围时，它的存在：

 范围{$ ID：005，$$ childTail：空，$$ childHead：空，$$prevSibling：空，
  $$ nextSibling：空...}
  $$ asyncQueue：数组[0]
  $$ childHead：空
  $$ childTail：空
  $$破坏：假的
  $$ isolateBindings：对象
  $$听众：对象
  $$ nextSibling：儿童
  $$阶段：空
  $$prevSibling：空
  $$观察家：数组[3]
  $ ID：005
  $家长：儿童
  $根：适用范围
  当前页：1
  itemsCount：11
  itemsPerPage：5
  这样的：范围
  __proto__：对象
 

此外，当我检查HTML源代码

 ＆LT;导航类=分页的项目数=11当前页=当前页项目的单页=5＆GT;
 

解决方案

通过一个隔离范围和 @ 符号，你需要使用 $ ATTRS。观察$（'itemsCount'，功能（价值）{...} 。

请参阅 http://docs.angularjs.org/guide/directive#attributes

在控制器（和链接）功能首先执行，在 @ 属性尚未填充。你因为时间在日志中看到你的价值扩大范围$对象，该值已被填充。

HostingCtrl:

function HostingListCtrl($scope, Hosting) {

    Hosting.all().success(function(data) {
        $scope.hostings = data;
    }); 
}

HTML template:

 <pagination items-count="{{hostings.length}}" current-page="currentPage" items-per-page="{{itemsPerPage}}"></pagination>

Directive:

admin.directive('pagination', function() {
    return {
        restrict: 'E',
        replace: true,        
        templateUrl: "<%= asset_path('angular/templates/ui/pagination.html') %>",
        scope: {            
            currentPage: '=',
            itemsCount: '@',
            itemsPerPage: '@'
        },
        controller: function($scope, $element, $attrs) {
            console.log($scope);
            console.log($scope.itemsCount);          
        },
        link: function(scope, element, attrs, controller) {                         
        }
    };
});

I'm trying to get hold of value of itemsCount variable in the directive but when I try to console.log it, the value is empty. Strange thing is that when console.log whole scope, it's there:

Scope {$id: "005", $$childTail: null, $$childHead: null, $$prevSibling: null,
  $$nextSibling: null…}
  $$asyncQueue: Array[0]
  $$childHead: null
  $$childTail: null
  $$destroyed: false
  $$isolateBindings: Object
  $$listeners: Object
  $$nextSibling: Child
  $$phase: null
  $$prevSibling: null
  $$watchers: Array[3]
  $id: "005"
  $parent: Child
  $root: Scope
  currentPage: 1
  itemsCount: "11"
  itemsPerPage: "5"
  this: Scope
  __proto__: Object

Also when I check the HTML source

<nav class="pagination" items-count="11" current-page="currentPage" items-per-page="5">

解决方案

With an isolate scope and the @ notation, you need to use $attrs.$observe('itemsCount', function(value) { ... }.

See http://docs.angularjs.org/guide/directive#attributes

When the controller (and link) functions first execute, the @ properties are not populated yet. You see the value in the log because by the time you expand the $scope object, the value has been populated.

这篇关于AngularJS：无法从CTRL范围为指令获取变量的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！