javascript - 在 JS 生成的 HTML 中包含 AngularJS 代码

Question

我正在使用旧版本的 AngularJS (1.3)。我有一个页面，我想根据数据库中的值有条件地显示不同的内容。如果数据库中的值通过用户交互更改，我想更新自动显示的内容。然而，我展示的部分内容是 HTML，在该 HTML 中我需要包含一些 AngularJS 代码。

如果值为 True，我想显示此 HTML:

Your value is True. To set it to False, <a ng-click="myToggleFunction('paramValueFalse')">click here</a>.

如果值为 False，我想显示此 HTML:

You haven't done the thing, to do the thing, <a ng-click="myDifferentFunction('someOtherParamValue')">click here</a>.

我已经非常接近工作了:显示的内容根据用户的值而变化，并且它会适当更新，甚至可以正确渲染 HTML(使用 $sce)...但是 ng - 单击不起作用。你能在通过 JS 注入(inject)的 HTML 中包含 Angular 吗？

完整代码:

HTML:

<span ng-bind-html="renderHtml(html_content)"></span>

Controller :

function MyCtrl ($scope, $http, $sce, Notification) {
    $scope.username = context.targetUsername;
    $scope.content_options = {
        'yes' : 'Your value is True. To set it to False, <a ng-click="myToggleFunction(" + "'paramValueFalse'" + ')">click here</a>.',
        'no' : 'You haven\'t done the thing, to do the thing, <a ng-click="myDifferentFunction(" + "'someOtherParamValue'" + ')">click here</a>.'
    }

    $http.get(
        '/api/v1/user/' + $scope.username + '/?fields=myBooleanField' // django rest api call
        ).then(function(response) {
            $scope.user = response.data;
            if ($scope.user.myBooleanField) {
                $scope.html_content = $scope.content_options['yes'];
            } else {
                $scope.html_content = $scope.content_options['no'];
            }
        });
    });

    $scope.myToggleFunction = function(paramValue) {
    // toggle value in the db

        if (accepted === 'true') {
            var success = "You turned on the thing";
            var content = "yes";
        } else {
            var success = "You turned off the thing";
            var content = "no";
        }

        $http({
            method: 'GET',
            url: '/api/v1/user/' + $scope.username + '/my_boolean_field/?value=' + paramValue, // django rest api call
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            $scope.html_content = $scope.content_options[content];
            Notification.success(success);

        }, function(response) {
            Notification.error("There was an error.");
        });

    };

    $scope.myDifferentFunction = function(someOtherParamValue) {
       // do some other stuff
    };

    $scope.renderHtml = function(html_code) {
        return $sce.trustAsHtml(html_code);
    };
}

MyCtrl.$inject = ['$scope', '$http', '$sce', 'Notification'];

Answer 1

正如 Sagar 上面所说，发生这种情况的原因是 renderHtml 返回的 html 代码不是由 AngularJS 编译的。我尝试了几种不同的方式来创建重新编译 Angular 的指令。例如:

• https://github.com/incuna/angular-bind-html-compile
• Rendering directives within $sce.trustAsHtml
• ng-click doesn't fire when added post load

但是，这些都不适合我。我不知道为什么；内容只是没有显示，但没有 JS 错误。

我最终找到了这个解决方案，它对我有用:Angular: ng-bind-html filters out ng-click?

本质上，解决方案是使用原始 JS 直接调用 Angular 函数，而不是在 JS 生成的 HTML 内容中使用 ng-click 指令。

它看起来像这样:

模板:

<div id="angularHtml" ng-bind-html="html_content">

<script>
function callAngular(controllerFunction, functionParam) {
    var scope = angular.element(document.getElementById('angularHtml')).scope();
    scope.$apply(function() {
        {# couldn't figure out how to reference the function from the variable value, so this is hacky #}
        if (controllerFunction == "myToggleFunction") {
            scope.myToggleFunction(functionParam);
        } else if (controllerFunction == 'myDifferentFunction') {
            scope.myDifferentFunction(functionParam);
        }
    });
}
</script>

Controller :

function MyCtrl ($scope, $http, $sce, Notification) {
    $scope.username = context.targetUsername;
    $scope.content_options = {
        'yes' : 'Your value is True. To set it to False, <a onClick="callAngular(\'myToggleFunction\', \'false\')">click here</a>.',
        'no' : 'You haven\'t done the thing, to do the thing, <a onClick="callAngular(\'myDifferentFunction\', \'someValue\')">click here</a>.'
    }

    $http.get(
        '/api/v1/user/' + $scope.username + '/?fields=myBooleanField' // django rest api call
        ).then(function(response) {
            $scope.user = response.data;
            if ($scope.user.myBooleanField) {
                $scope.html_content = $sce.trustAsHtml($scope.content_options['yes']);
            } else {
                $scope.html_content = $sce.trustAsHtml($scope.content_options['no']);
            }
        });
    });

    $scope.myToggleFunction = function(paramValue) {
    // toggle value in the db

        if (accepted === 'true') {
            var success = "You turned on the thing";
            var content = "yes";
        } else {
            var success = "You turned off the thing";
            var content = "no";
        }

        $http({
            method: 'GET',
            url: '/api/v1/user/' + $scope.username + '/my_boolean_field/?value=' + paramValue, // django rest api call
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            $scope.html_content = $sce.trustAsHtml($scope.content_options[content]);
            Notification.success(success);

        }, function(response) {
            Notification.error("There was an error.");
        });
    };

    $scope.myDifferentFunction = function(someOtherParamValue) {
       // do some other stuff
    };
}

MyCtrl.$inject = ['$scope', '$http', '$sce', 'Notification'];