6

我是 AngularJS 领域的新手，当然我做错了事。所以，这是我的问题：我有一个小型聊天小部件，它通过 JSON 从 PHP API 获取数据。在我的 JSON 中，我为所有消息提供了包装器和一些 ng* 标签。我遇到的问题是这些元素上没有触发 ng-click 动作。html 块是用 ng-bind-html 注入的。

这是我的角度应用程序：

var chat = angular.module("chat", ['ngDialog']);

chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {

    $scope.messages = "";


    $scope.getData = function() {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                $scope.messages = data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };

    $scope.getData();

    $scope.getHtml = function(html){
        return $sce.trustAsHtml(html);
    };

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function(){
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 5000)
    };


    // Kick off the interval
    $scope.intervalFunction();

    $scope.messageAdminTools = function(message_id)
    {
        console.log("called");
        var template = $scope.adminToolsTemplate(message_id);
        console.log(template);
        ngDialog.open({
            template: template,
            plain: true
        });
    };

    $scope.adminToolsTemplate = function(message_id)
    {
        $http.get("/url/to/api" + message_id)
            .success(function(data, status, headers, config) {
                return data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };
});

这是来自 JSON 的 html 代码：

<body ng-controller="GetChatMessagesController" class="ng-scope">
    <div class="messages-container ng-binding" ng-bind-html="getHtml(messages)">
        <div class="message message_1">
            <span class="time">16:33</span>
            <span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
            <span class="text">test <a href="javascript:void(0);" class="chat-tools" ng-click="messageAdminTools('1')">x</a></span>
        </div>
    </div>
</body>

ng-click="messageAdminTools('1')单击元素时不会触发。我究竟做错了什么？

谢谢！

编辑：工作代码

这是答案后修改的代码，解决问题的代码：

var chat = angular.module("chat", ['ngDialog']);

chat.controller('GetChatMessagesController', function ($scope, $http, $timeout, $sce, ngDialog) {

    $scope.messages = "";


    $scope.getData = function() {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                $scope.messages = data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };

    $scope.getData();

    $scope.getHtml = function(html){
        return $scope.messages;
    };

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function(){
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 5000)
    };


    // Kick off the interval
    $scope.intervalFunction();

    $scope.messageAdminTools = function(message_id)
    {
        console.log("called");
        var template = $scope.adminToolsTemplate(message_id);
        console.log(template);
        ngDialog.open({
            template: template,
            plain: true
        });
    };

    $scope.adminToolsTemplate = function(message_id)
    {
        $http.get("/url/to/api")
            .success(function(data, status, headers, config) {
                return data.html;
            }).error(function(data, status, headers, config) {
                //alert("AJAX f   ailed!");
            });
    };
}).directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}]);

HTML：

<body ng-controller="GetChatMessagesController" class="ng-scope">
    <div class="messages-container" compile="getHtml(messages)">
        <div class="message message_1 ng-scope">
            <span class="time">16:33</span>
            <span class="chatbox_user"><a target="_blank" href="url">admin</a>: </span>
            <span class="text">test <a href="javascript:void(0);" class="chat-tools" ng-click="messageAdminTools('1')">x</a></span>
        </div>
    </div>
</body>
4

1 回答 1

6

试试这个：angular ng-bind-html 和其中的指令

查看 vkammerer 提供的指令。特别要注意$compile步骤。

于 2015-04-08T22:54:07.763 回答