ng-include中的指令

Question

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

我在做什么

在init上,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>

Answer 1

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

你在范围内使用原始值被咬了.

• 当你把fblogin外面ngInclude这是在控制器的相同的范围.
• ngInclude总是创建一个新的子范围,因此其中的任何指令都是打开的a child scope.

从了解范围维基:

范围继承通常很简单,你通常甚至不需要知道它正在发生......直到你尝试双向数据绑定(即表单元素,ng-模型)到一个原语(例如,数字,字符串, boolean)在子范围内从父范围定义.

它不像大多数人期望的那样工作.会发生什么是子范围获取其自己的属性,该属性隐藏/隐藏同名的父属性.这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理.

新的AngularJS开发人员通常没有意识到ng-repeat,ng-switch,ng-view和ng-include都会创建新的子范围,因此在涉及这些指令时经常会出现问题.

通过遵循始终具有'.'的"最佳实践",可以轻松避免与原语的这个问题.在您的ng模型中.

在你的情况下发生的是,scope.saveTemplate = '/set/continue';只需在子范围上创建一个变量scope.saveTemplate,即父范围(控制器)的阴影.