最近创建的元素不会调用ng-click

时间:2015-06-11 15:16:02

标签: javascript angularjs

我的代码中有一些html元素,稍后会在页面上添加。但是当你稍后添加它时,指令ng-click不起作用。

我尝试的另一个解决方案是使用onclick属性在此后添加的元素上调用节点方法,但这意味着在控制器外部调用angularJs方法并且它是不可能的(如果是这样,对于许多类型来说可能是一个很好的解决方案问题)

这是jsfiddle示例: http://jsfiddle.net/hugoofab/wktqrhv3/1/

这是标记:

<div ng-app="myApp" ng-controller="MyController" >
<button type="button" ng-click="testFunction('this will work')">STEP 1. this will work</button>

<button type="button" ng-click="addElement()" >STEP 2. add button</button>
    <div id="foodiv"></div>

<button type="button" onclick="anotherWay()" >STEP 4. another way</button>

这是javascript:

var myApp = angular.module('myApp', []);

function anotherWay ( ) {
    alert("another way would be call node method outside, but how to do it?")
    // ohhh man.. what I'll code here?
    //myApp.controller.scope()..... I really don't know
}

myApp.controller('MyController', function($scope) {

    $scope.testFunction = function ( a ) {
        alert(a)
    }

    $scope.addElement = function ( ) {
        document.getElementById('foodiv').innerHTML = '<button type="button" ng-click="testFunction(\'this will not work\')">STEP 3. this will not work</button>' ;
    }

});

感谢的!

1 个答案:

答案 0 :(得分:0)

看来你正在以“非角度”的方式做事......

首先,这种情况发生在您身上,因为您在角度为$compile视图后添加了这些元素。

这种“角度方式”的一种方法是在按钮上使用ng-show / ng-hide指令,并使用控制器显示/隐藏它们。

另一种方式是这样的事情:

$scope.buttons = [{ }, { }];

使用控制器向此阵列添加按钮。然后使用ng-repeat在视图中渲染此数组。