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>

您可以参考this docs for $ compile。

ng-click不会使用函数触发

1 个答案: