7

我正在构建一个简单的 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>
4

1 回答 1

9

这是一个有效的 plunker：http ://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview

您被范围上的原始值咬伤了。

  • 当你把它放在控制器的同一范围fblogin之外时。ngInclude
  • ngInclude总是创建一个新的子作用域，所以它里面的任何指令都是 on a child scope。

从了解范围维基：

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

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

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

通过遵循始终使用“.”的“最佳实践”，可以轻松避免原语的这个问题。在你的 ng-models中。

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

于 2014-01-26T22:59:31.753 回答