AngularJS - 包含控制器代码的动态HTML

Question

我有一个显示弹出窗口的AngularJS页面。使用AJAX调用从服务器动态检索弹出窗口的HTML。这个动态HTML包含一个新的控制器和控制器所需的AngularJS代码。 仅当父页面中存在子页面JavaScript代码时，此代码才有效。 我想将所有子页面代码保存在子页面中。

有人可以指出我做错了吗？

主页

    <div id="mainPage" ng-controller="mainController">
            Contains a table that displays a bunch of rows.
    </div>

    <div id="popup">
            Dynamic HTML retrieved from AJAX goes here.
    </div>

    <script type="text/javascript">
            angularMainApp.controller('mainController', ['$scope', '$http', '$compile', function ($scope, $http, $compile)
            {
                    $scope.activateView = function(ele) 
                    {
                            $compile(ele.contents())($scope);
                            $scope.$apply();
                    };

                    $scope.buttonClick = function()
                    {
                            $("#popup").html( dynamicHTMLThroughAJAX );
            $scope.activateView($("#divCreateTemplatePopup"));

                            return;
                    }
                    return;
            }]);
    </script>

动态HTML内容

    <div ng-controller='childController'>
            Some HTML here.
    </div>


    <script type="text/javascript">
            angularMainApp.controller('childController', ['$scope', '$http', function ($scope, $http)
            {
            }]);
    </script>

Answer 1

Angular需要知道您更改了内容并意识到它应该自行更新。

所以，你要做的就是给那些将观察者和其他东西应用到当前DOM中的人。

为此，您将使用$scope.$apply();。通过调用此函数，您可以强制角度将观察者和其他内容添加到DOM中，现在它也可以与您一起使用新内容。

我建议你阅读angularjs中的摘要，看看它是如何工作的。 这里有一些关于你的问题的链接，以便更好地看到问题：

AngularJS and scope.$apply

Digest cycle and $scope

AngularJs docs : $scope.$apply()

When to use $scope.$apply()

AngularJS: $watch, $digest and $apply

祝你好运，玩得开心。