ng-include中的指令

时间:2014-01-26 21:50:29

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

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

1 个答案:

答案 0 :(得分:9)

这是一个工作的掠夺者: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的变量。