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 以便 angular 代码可以工作

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

您可以参考 this 文档以获得 $compile。

ng-click 不会触发函数

ng-click does not fire with a function

javascript

jquery

angularjs

angularjs-ng-click