Question

我有一个从我的本地存储中呈现数据。这些行具有编辑功能。这些将他们带到另一页。单击该链接时的ng-click功能不会被点击。

HTML：

<body ng-app="animateApp" ng-controller="appBody" onload="init()">    
<ul id="events-list">
    </ul>
</body>

呈现数据的Javascript函数：

function renderEvent(row) {
    return "<li>" + row.title
                  + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteEvent(" + row.ID +");'>Delete</a>]"
                  + " [<a ng-click='sayHello()' href='#event-edit?eventname=" + row.title + "&eventid=" + row.ID + "'>Edit</a>]</li>";
}

sayHello（）函数：

function appBody($scope) {

    $scope.sayHello = function() {
        setTimeout(function(){
            alert('function runned');

            var eventname            = 'Foo';
            var eventid              = '1';

            $scope.editEventName        = eventname;
            $scope.editEventId          = eventid;
        },1);

    };
}

如何解锁该功能？当我在UL之外调用相同的功能时，它会毫无问题地发射。

Answer 1

您可以构建一个可以容纳所有行的范围数组，然后使用angular：

渲染链接

$scope.rows = yourGetRowsFunctionCall(); //this method can be in an angular service

然后在html中你可以使用：

<body ng-app="animateApp" ng-controller="appBody" onload="init()">    
  <ul id="events-list">
    <li ng-repeat="row in rows">{{row.title}}
       <a href="javascript:void(0);"  onclick="html5rocks.webdb.deleteEvent({{row.ID}})">Delete</a>
       [<a ng-click="sayHello()" href="#event-edit?eventname={{row.title}}&eventid={{row.ID}}">Edit</a>]
    </li>
  </ul>
</body>

此外，你可以看一下ng-click doens't work on dynamic DOM AngularJS?这些州的帖子，并引用：如果你通过Angular-external手段操纵DOM，你就不会完全接受Angular哲学。

在呈现的WebDB上进行ng-click工作<a></a>

1 个答案: