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指令不起作用但是当页面在页面上时，角度js代码正常工作我的角度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))

以下是

的示例

＆＃13;

(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);

＆＃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时，AngularJS指令不起作用

1 个答案: