在JS中生成的HTML中包括AngularJS代码

Question

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

如果值为真，我想显示此html：

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

如果值是错误的，我想显示此html：

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

我已经接近工作了：根据用户的价值是什么，显示出更改的内容，并且它适当地更新，甚至可以正确地呈现HTML(使用$ SCE(...但是NG - 单击不起作用。您可以将Angular在HTML中包括在HTML中吗？

完整代码：

html：

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

控制器：

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编译。我尝试了一些不同的方法来创建一个重新编译角度的指令。例如：

• https://github.com/incuna/angular-bind-html-compile
• 在$ sce.trustashtml中渲染指令
• ng click添加后不会发射

但是，这些都不为我工作。我不确定为什么；内容只是没有显示，但没有JS错误。

我最终找到了这个解决方案，它对我有用：Angular：ng-bind-html过滤ng单击？

本质上，解决方案是使用RAW JS直接调用角函数，而不是在JS生成的HTML内容中使用NG点击指令。

这就是它的样子：

模板：

<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>

控制器：

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'];

Answer 2

您可以使用ngshow和ng-hide进行显示和隐藏html dynamic

<div ng-show="DBvalue">Your value is True. To set it to False, <a ng-click="myToggleFunction('paramValueFalse')">click here</a>.</div>
<div ng-hide="DBvalue">You haven't done the thing, to do the thing, <a ng-click="myDifferentFunction('someOtherParamValue')">click here</a>.</div>