AngularJS：指令和范围 [英] AngularJS : directives and scope

问题描述

我有一个简单的问题，我认为有pretty简单的解决方案，但不知何故，我错过了。

我设置为我的应用程序的简单指令。我要离开设置为默认范围内的财产，假，因为我希望它分享我的控制范围。

问题是，我似乎无法访问范围。

在我的链接功能，我可以这样做：

  console.dir（范围）
 

和我可以看到我后的范围对象（页）的属性。

如果我尝试做的：

  console.dir（scope.pages）
 

然而，它回来为未定义。

我在想什么？

先谢谢了。

  MyDirectives.directive（mdPagination功能（）{
    返回{
        templateURL：/templates/pagination.html
        更换：真实，
        限制：'A'，
        适用范围：假的，//默认
        链接：功能（范围，元素，ATTRS）{
            的console.log（'在连接功能'）;
            console.dir（范围）;
            console.dir（元件）;
            console.dir（ATTRS）;
            console.dir（scope.pages）;
        }
    }
}）;
 

模板：

 ＆LT;导航类=分页MD-分页＆GT;＆LT; / NAV＆GT;
 

控制器：

  App.controller（'MachinesListCtrl'，函数（$范围，$ routeParams，$位置，MachineServices，CustomerServices）{    VAR页=（$ routeParams.page $ routeParams.page：1）;    //如果我们正在根据自己的客户ID的所有机器。
    如果（$ routeParams.customerID）{
        MachineServices.getByCustomerId（$ routeParams.customerID）。然后（功能（数据）{
            _.each（data.results，功能（机，索引列表）{
                CustomerServices.get（machine.customer_id）。然后（功能（数据）{
                    machine.CustomerData = data.results;
                }）;
            }）;            $ scope.Machines = data.results;
            $ scope.pages = data.pages;
        }）;
    }
    //否则我们只想机的常规列表。
    其他{
        MachineServices.query（页）。然后（功能（数据）{
            _.each（data.results，功能（机，索引列表）{
                CustomerServices.get（machine.customer_id）。然后（功能（数据）{
                    machine.CustomerData = data.results;
                }）;
            }）;            $ scope.Machines = data.results;
            $ scope.pages = data.pages;
        }）;
    }
}）;
 

解决方案

在您的code的问题是： MachineServices.getByCustomerId 和 MachineServices.query 为 异步的。当你调用这些功能，从服务器的数据还没有到达，这些行

  $ scope.Machines = data.results;
  $ scope.pages = data.pages;
 

还没有叫的

在您的链接功能范围被绑定到家长的范围。但是，当链接函数被调用时，父母的scope.pages 的仍然是不确定的（由于ASYN）的

当我们具有角数据绑定，我们应该 被动的，只听更改和做出相应的反应（使用$手表，例如），因为我们的$工作C $ç的不知道，应该不知道的当绑定属性具有价值还是有它的价值更新。 让角通知我们的变化

I have a simple question that I think has a pretty simple solution, but somehow I am missing it.

I'm setting up a simple directive for my app. I'm leaving the scope property set to the default, "false", because I want it to share the scope of my controller.

The problem is, I can't seem to access that scope.

In my linking function, I can do:

console.dir(scope)

and I can see the property that I am after ('pages') in the scope object.

If I try to do:

console.dir(scope.pages) 

however, it comes back as undefined.

What am I missing?

Thanks in advance.

MyDirectives.directive("mdPagination", function(){
    return {
        templateURL: "/templates/pagination.html",
        replace: true,
        restrict: 'A',
        scope: false, //default
        link: function(scope, element, attrs){ 
            console.log('in linking function');
            console.dir(scope);
            console.dir(element);
            console.dir(attrs);
            console.dir(scope.pages);
        }
    }
});

The template:

<nav class="pagination" md-Pagination></nav>

The controller:

App.controller('MachinesListCtrl', function ($scope, $routeParams, $location, MachineServices, CustomerServices) {

    var page = ($routeParams.page ? $routeParams.page : 1);

    //if we are getting all machines based on their customer id.
    if($routeParams.customerID){
        MachineServices.getByCustomerId($routeParams.customerID).then(function (data) {
            _.each(data.results, function (machine, index, list) {
                CustomerServices.get(machine.customer_id).then(function(data){
                    machine.CustomerData = data.results;
                });
            });

            $scope.Machines = data.results;
            $scope.pages = data.pages;
        });
    }
    //otherwise we just want the regular list of machines.
    else{
        MachineServices.query(page).then(function (data) {
            _.each(data.results, function (machine, index, list) {
                CustomerServices.get(machine.customer_id).then(function(data){
                    machine.CustomerData = data.results;
                });
            });

            $scope.Machines = data.results;
            $scope.pages = data.pages;
        });
    }
});

解决方案

The problem in your code is: MachineServices.getByCustomerId and MachineServices.query are asynchronous. When you call these functions, data from the server does not arrive yet and these lines

  $scope.Machines = data.results;
  $scope.pages = data.pages;

are not called yet.

Scope in your link function is bound to the parent's scope. But when the link function is called, the parent's scope.pages is still undefined (due to asyn)

When we work with angular data-binding, we should be passive, just listen for changes and react accordingly(use $watch, for example), because our code does not know and should not know when the bound property has value or has its value updated. Let angular notify us the changes

这篇关于AngularJS：指令和范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！