2

我有一些标记和加载的控制器。

然后我通过 ajax 加载一些模态窗口内容，它使用我之前定义的控制器之一。但看起来这个控制器没有被使用，因为在加载模式之前不需要他。

问题：如何在模态加载时使控制器工作？我尝试了 $scope.$digest()，得到了错误“digest in progress”。

索引.html

<html data-ng-app="foo">
<head>
<script src="/js/app.js"></script>
</head>
<body>
<div id="modal"></div>
</body>
</html>

js/app.js

!(function(){
    function FormCtrl($scope) {
        console.log($scope); // never fired

        $scope.Submit = function() {
            console.log('submit'); // never fired too :C
        }
    }

    angular.module('foo', []).controller('FormCtrl', FormCtrl);
})();

由ajax加载并插入到#modal的html内容

<div data-ng-controller="FormCtrl">
<form name="signup" data-ng-submit="Submit()">
<!-- form data -->
</form>
</div>

解决方案：

$.modal().open({
    onOpen: function($e) {
        $http.get('/views/' + url).success(function(data) {
            $compile(data)($scope, function(clonedElem) {
                $e.html(clonedElem);
            });

            // $e.html(data); was used instead of statement above
        });
    }
});
4

1 回答 1

1

如果你想将新的 DOM 元素注入到现有的 Anuglar 应用程序中。你的选择是使用

  • ng-include：它有一个src属性，它获取必须从中加载部分内容的 url。AngularJS 会在内部编译它。这里的一件重要的事情是，Angular 会在遇到ng-includehtml 时立即下载模板。
  • 使用$compile服务手动下载和编译 DOM，这是一个更复杂的过程。

如果您的 AJAX 内容包含在 中定义的控制器ng-controller，AngularJS 会为您创建它。

但无论如何，请记住控制器脚本应该已经在初始化\设置阶段连接。

于 2013-09-06T11:12:56.980 回答