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

和/ 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总是创建一个新的子范围，因此其中的任何指令都在a child scope上。

来自Understanding Scopes wiki:

范围继承通常很简单，你甚至不需要知道它正在发生......直到你尝试双向数据绑定（即表单元素，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的变量。

ng-include中的指令

1 个答案:

您在范围内使用原始值被咬了。

来自Understanding Scopes wiki: