ng-include 中的指令答案

【问题标题】：Directives inside ng-includeng-include 中的指令
【发布时间】：2014-02-17 15:13:51
【问题描述】：

我正在构建一个简单的 angularjs 应用程序，我正在尝试在不刷新页面的情况下实现登录。

我在做什么

在初始化时，ng-include 加载 /set/save。 /set/save 里面有<a fblogin>Login with Facebook</a>。因此，当单击指令打开一个窗口时，当窗口关闭时，它应该更改 ng-include 的 src。

问题

当在 ng-include 中使用指令时（ng-include src 在 init 上有默认值），什么也没有发生（控制台中没有错误，只是没有），但是当我将指令放在 ng-include 之外时，它正在工作很好（见下面的 HTML 代码）

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>

指令：

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);
        });
    }
};
});

控制器：

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

然后/设置/保存

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

【问题讨论】：

标签： javascript angularjs templates angularjs-directive angularjs-ng-include

【解决方案1】：

这是一个正常工作的插件：http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview

你被作用域上的原始值咬了。

当您将 fblogin 放在 ngInclude 之外时，它与控制器的作用域相同。
ngInclude 总是创建一个新的子作用域，因此其中的任何指令都在 a child scope 上。

来自Understanding Scopes wiki:

范围继承通常很简单，而且您通常甚至不需要知道它正在发生...直到您尝试将 2 路数据绑定（即表单元素、ng-model）到基元（例如数字, string, boolean) 从子作用域内定义在父作用域上。

它并没有像大多数人期望的那样工作。发生的情况是子作用域拥有自己的属性，该属性隐藏/隐藏同名的父属性。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作原理。

新的 AngularJS 开发者往往没有意识到 ng-repeat、ng-switch、ng-view 和 ng-include 都创建了新的子作用域，所以当涉及到这些指令时，问题往往会出现.

遵循始终have a '.' in your ng-models 的“最佳实践”，可以轻松避免原语的这个问题。

在您的情况下发生的情况是 scope.saveTemplate = '/set/continue'; 只是在子范围内创建一个变量，该变量会影响父范围（控制器）的 scope.saveTemplate。

【讨论】：