Угловой: ng-click на блоке ng-bind-html не работает

Я совершенно новый в области AngularJS, и, конечно, я делаю что-то не так. Итак, вот моя проблема: у меня есть небольшой виджет чата, который передает данные через JSON из PHP API. В моем JSON я предоставляю все сообщения с обертками и с некоторыми тегами ng *. Проблема в том, что действие ng-click не запускается для этих элементов. В блок html вводится ng-bind-html.Угловой: ng-click на блоке 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!"); 
      }); 
    }; 
});

А вот HTML код, который приходит из JSON:

<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') не срабатывает, когда я нажимаю на элемент. Что я делаю не так?

Спасибо!

EDIT: Рабочий код

Вот код изменен после ответа, код, который решает эту проблему:

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>

источник

2015-04-08 Comforse

Попробуйте это: angular ng-bind-html and directive within it

Посмотрите стороне директивы, которую предоставил vkammerer. Особенно обратите внимание на шаг $compile.

источник

2015-04-08 22:54:07 HankScorpio

Совершенно, я применил руководящие принципы в ссылке, и теперь это работает. Я опубликую рабочий код немного позже. – Comforse

Угловой: ng-click на блоке ng-bind-html не работает

ответ

Смежные вопросы