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-click不起作用。你可以在HTML中包含角度，这是通过JS注入的吗？

完整代码：

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

然而，这些都不适合我。我不确定为什么;内容只是没有显示，但没有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>

控制器：

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

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

在JS

2 个答案: