附加 jQuery 时，AngularJS 指令不起作用

Question

我在下面附加了从服务器端返回的 html 表单以响应 ajax 调用

<div ng-app="submitExample"  >
    <form action="shan" ng-submit="submit()" ng-controller="ExampleController" id="account_info_modal">

    Enter text and hit enter:
        <input type="text" ng-model="text" name="text" />
        <input type="submit" id="submit" value="Submit" />

  </form>


</div>

当使用 ajax 附加表单时，这里 angular js 指令不起作用，但是当表单在页面上时，angular js 代码可以正常工作，下面给出了我的 angular js 脚本

(function() {
    angular.module('submitExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
            $scope.submit = function() {
                alert("hello submit");
            };
        }]);
})();

给出下面我用来附加html表单的函数

function show_account_info_modal(param)
    {

        var id=$(".jstree-clicked").parent().attr('id');
        var name=$(param).attr('name');

        $.ajax({
            type: 'get',
                url: '<?= admin_url('Chart_of_accounts/get_account_info_modal'); ?>',
            data: { account_id:id,name:name },
            success: function (data)
            {
                $("#account_info_modal").html(data)
            }
        });


    }

Answer 1

追加元素时需要使用$compile服务。

将 HTML 字符串或 DOM 编译成模板并生成模板函数，然后可以使用该函数将作用域和模板链接在一起。

根据您的代码使用

$("#account_info_modal").html($compile(data)($scope))

这是一个例子

(function(angular) {
  'use strict';
  angular.module('myApp', [])
    .controller('Controller', ['$scope', '$compile',
      function($scope, $compile) {

        $scope.click = function() {
          console.log($scope.text)
        }

        //Append element dynamically
        var html = $compile('<input type="text" ng-model="text" name="text" /><button type="button" ng-click="click()">Click Me</button>')($scope);
        angular.element(document.querySelector('#x')).append(html);

      }
    ]);

})(window.angular);

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