Question

我正在使用angularjs 1.5来构建聊天应用程序，在聊天中我希望在发生特定事件时得到用户的确认。

我正在为$ http.get指令的成功承诺做这一部分。收到数据后，我检查data.confidence。如果data.confidence小于0.7，我希望用户给我反馈，答案是否有帮助。因此，在聊天记录中，一旦使用jquery触发事件，我会动态附加反馈部分，一旦点击按钮，ng-click就不起作用了。但是在视图中的另一个按钮上，ng-click确实有效。提前致谢。这是代码。

app.controller('telecom_controller', function($http, $scope) {
    console.log("Telecom Controller");
    $scope.telecom_messages = [];


    $scope.message = function(){
        console.log("M3");
    };


    $scope.ask = function(){
        $scope.query = $("#telecom_query_text").val();
        $('#telecom_query_text').val('');
        $scope.telecom_messages.push($scope.query);
        console.log($scope.telecom_messages);
        $scope.loading = true;
        console.log($scope.loading);
        $scope.qs = 'http://deeplearn.zippybots.com/api/getanswer?question=' + $scope.query + '&faqset=Telecom.xlsx&format=json';

        // Scrolling Part Trial
        $("#cl_telecom").animate({scrollTop: 90000}, 3000);

       $http.get($scope.qs).
       success(function(data, status){
            console.log($scope.qs);
            console.log("Successful");
            console.log(data);
            console.log(data.answer);
            confidence = parseFloat(data.confidence);
            if (confidence < 0.7){
                alert(confidence);
                var r= $('<p>Did the above answer help you?<p><button type="button" class="btn btn-success" ng-click="message()">Yes</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-danger">No</button>');
                chat_log = document.getElementById('cl_telecom');
                $(chat_log).append(r);
            }
            else{
                // alert("Nothing to show");
            }
            $scope.telecom_messages.push(data.answer);
            $scope.loading = false;
            console.log($scope.loading);
            // Scroll Part
            $("#cl_telecom").animate({scrollTop: 90000}, 3000);
        }).
        error(function(data, success){
            console.log("Error");
            console.log(data);
            $scope.telecom_messages.push("Sorry! Didn't get you....");
            $scope.loading = false;
            console.log($scope.loading);
            // Scroll Part
            $("#cl_telecom").animate({scrollTop: 90000}, 3000);
        });
    };
});

Answer 1

您需要使用$compile

将HTML字符串或DOM编译到模板中并生成模板函数，然后可以将其用于将范围和模板链接在一起。

var r = $compile('<p>Did the above answer help you?<p><button type="button" class="btn btn-success" ng-click="message()">Yes</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-danger">No</button>')($scope);
angular.element(document.getElementById('cl_telecom')).append(r);

＆＃13;

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', ['$scope','$compile',
      function($scope, $compile) {
        var html = $compile('<a ng-click="click()" href="#">Click me</a>')($scope);
        angular.element(document.querySelector('#x')).append(html);
        $scope.click = function() {
          console.log('Yahoooooooooooo')
        }
      }
    ]);
})(window.angular);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <div id="x">
    </div>
  </div>
</div>

＆＃13;

添加了jquery无效的按钮上的ng-click（）

1 个答案: