ng-include内的指令

Question

我正在构建一个简单的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";
    }
]);

和/ set / save

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

Answer 1

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

您在示波器上使用原始值被咬了。

• 当你把fblogin外面ngInclude这是在控制器的相同的范围。
• ngInclude总是创建一个新的子范围，因此它里面的任何指令都是on a child scope。

从[了解范围Wiki：](https://github.com/angular/angular.js/wiki/Understanding-

Scopes)

范围继承通常是简单明了的，并且您通常甚至不需要知道它的发生……直到您尝试将2-way数据绑定（例如，表单元素，ng-
model）绑定到基元（例如，数字，字符串，布尔值）从子作用域内部在父作用域上定义。

它不能像大多数人期望的那样工作。发生的情况是 子作用域获得了自己的属性，该属性隐藏/阴影了同名的父属性 。AngularJS并没有这样做-
这就是JavaScript原型继承的工作方式。

新的AngularJS开发人员通常不会意识到 ng-repeat，ng-switch，ng-view和ng-include都会创建新的子范围
，因此当涉及这些指令时，常常会出现问题。

通过遵循始终具有“’
”的“最佳实践”，可以很容易地避免使用基元出现此问题。在您的ng-
models中。

您遇到的情况是，scope.saveTemplate = '/set/continue';仅在子作用域上创建一个变量，该变量将成scope.saveTemplate为父作用域（控制器）的影子。