ng-click不会触发功能

Question

我是Angular的新手，现在遇到了一些问题...

因此，假设我有一个名为ViewModelController的控制器，并且在按以下方式定义路由时使用controlleras： 。

在我的模板中，我只划分了两个div，将容器分为两部分：

<div id='viewleft' class="divleft col-md-5"></div>
<div id='viewright' class="col-md-7 divright"></div>

在ViewModelController中，我有一些代码在加载控制器时呈现模板。 问题是我放所有元素的ng-click不会触发，而且我真的不知道问题出在哪里。

我已经尝试过类似下面的操作，但是它不起作用。

  var content1 = '<ul><li><button id ="b1" ng-click="vmCtrl.cprint($event.target)">123</button></li><ul>';
  $("#viewleft").html(content1);

有人可以帮我吗？ 预先谢谢您，最良好的祝愿。

Answer 1

您必须编译此html，以便角度代码能正常工作

$compile($("#viewleft").contents())(scope);

或者最好使用在值更改时编译html的指令。

app.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分配给作用域变量

$scope.template= '<ul><li><button id ="b1" ng-click="vmCtrl.cprint($event.target)">123</button></li><ul>';

在视图上，您​​可以添加

<div id='viewleft' class="divleft col-md-5" compile="template"></div>

您可以将此文档参考$ compile。