指令内NG-包括 [英] Directives inside ng-include

问题描述

我建立了一个简单的应用程序angularjs，我试图实现无需登录页面刷新。

我在做什么

在初始化的NG-包括加载/设置/保存。本/套/保存拿到了＆LT;一个fblogin＆gt;在Facebook和LT登录; / A＆GT; 在里面。所以，当点击该指令打开一个窗口，在该窗口关闭时，应该改变NG-包括。

的src

问题

在该指令在内部使用的NG-包括：（NG-包括SRC对初始化的默认值），没有任何反应（在控制台中没有错误，只是没有），但是当我把指令外NG-包括它的工作罚款（见HTML code以下）

HTML

 ＆LT; D​​IV ID =设置的创造者NG控制器=SetCtrl＆GT;
    ........
    ＆LT; D​​IV ID =saveModal级=显示模态数据显示＆GT;        ＆所述; A HREF fblogin＆GT;测试用例＆下; / A＆GT;                // ^这是工作
                //但如果指令是内部NG-包括，它不工作        ＆LT; NG-包括SRC =saveTemplate＆GT;＆LT; / NG-包括＆GT;
        ＆所述;类别=近距离揭示峰＆GT;＆放大器;＃215;＆下; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

指令：

  App.directive（'fblogin'，函数（）{
返回{
    transclude：假的，
    链接：功能（范围，元素，ATTRS）{        element.click（函数（）{
            VAR赢= window.open（/认证/脸谱，popUpWindow'，'中心屏幕= TRUE'）;
            VAR intervalID =的setInterval（函数（）{
                如果（win.closed）{                    scope.saveTemplate ='/套/继续;
                    。范围$适用（）;
                    clearInterval（intervalID）;
                }
            }，100）;
        }）;
    }
};
}）;
 

控制器：

  App.controller（SetCtrl，[$范围，SetHolder
    功能（$范围，SetHolder）{
        $ scope.saveTemplate ='/套/保存;
        $ scope.test =装;
    }
]）;
 

和/套/保存

 您需要以保存设置被记录。
＆LT; BR /＆GT;
＆LT;一个fblogin＆GT;登录Facebook和LT; / A＆GT;
 

解决方案

下面是一个工作plunker：<一href=\"http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=$p$pview\">http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=$p$pview

你被使用的范围原始值咬伤。

• 当你把 fblogin ngInclude 之外这是对控制器的相同的范围。


• ngInclude 总是创建一个新的子范围，所以它里面的任何指令是在子作用域。

维基作用域：

  

继承范围通常是简单的，你经常甚至不需要知道它正在发生......直到你尝试2路数据绑定（即表单元素，NG-模型）为原始（例如，数，字符串，布尔）从孩子域内父范围界定。

  
  

它不工作的方式大多数人期望它应该工作。什么情况是，孩子获得范围自有物业，隐藏/阴影的同名parent属性即可。这不是AngularJS做 - 这是原型继承如何JavaScript的工作。

  
  

新AngularJS开发商往往没有意识到的 NG-重复，NG-开关，NG-查看和NG-包括所有创造新的子作用域，所以问题往往显示出来时，这些指令都参与。

  
  

这与原语的问题可以按照总的有一个'。在NG-车型。

会发生什么你的情况是， scope.saveTemplate ='/套/继续; 只是创建在子范围变量，它的阴影 scope.saveTemplate 父作用域（控制器）。的

I'm building a simple angularjs app and I'm trying to implement login without page refresh.

What I'm doing

On init the ng-include loads the /set/save. The /set/save got the <a fblogin>Login with Facebook</a> in it. So when clicked the directive opens a window and when the window is closed it should change the src of the ng-include.

The problem

When the directive is used inside the ng-include ( ng-include src has default value on init ), nothing happens ( no errors in console, just nothing ), but when I put the directive outside the ng-include it's working fine ( see HTML code below )

HTML:

<div id="set-creator" ng-controller="SetCtrl">
    ........
    <div id="saveModal" class="reveal-modal" data-reveal>

        <a href fblogin>testCase</a> 

                // ^this is working
                //but if the directive is inside ng-include, it's not working

        <ng-include src="saveTemplate"></ng-include>
        <a class="close-reveal-modal">&#215;</a>
    </div>
</div>

Directive:

App.directive('fblogin', function() {
return {
    transclude: false,
    link: function(scope, element, attrs) {

        element.click(function() {
            var win = window.open("/auth/facebook", 'popUpWindow', 'centerscreen=true');
            var intervalID = setInterval(function() {
                if (win.closed) {

                    scope.saveTemplate = '/set/continue';
                    scope.$apply();


                    clearInterval(intervalID);
                }
            }, 100);
        });
    }
};
});

Controller:

App.controller("SetCtrl", ["$scope", "SetHolder",
    function($scope, SetHolder) {
        $scope.saveTemplate = '/set/save';
        $scope.test = "loaded";
    }
]);

And /set/save

You need to be logged in order to save the set.
<br />
<a fblogin>Login with Facebook</a>

解决方案

Here is a working plunker: http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview

You got bitten by using a primitive value on the scope.

• When you put fblogin outside of ngInclude it's on the same scope of the controller.
• ngInclude always creates a new child scope so any directive inside it is on a child scope.

From Understanding Scopes wiki:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope.

It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works.

New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

What happens in your case is that scope.saveTemplate = '/set/continue'; just create a variable on the child scope which shadows scope.saveTemplate of the parent scope (controller).

这篇关于指令内NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！