我有一个简单的ng-repeat循环,像这样:

<li ng-repeat='task in tasks'>
  <p> {{task.name}}
  <button ng-click="removeTask({{task.id}})">remove</button>
</li>

在控制器$scope.removeTask(taskID)中有一个函数。

据我所知,Angular会先渲染视图并替换插值的{{task。Id}}和一个数字,然后,在点击事件,将计算ng-click字符串。

在这种情况下,ng-click得到的完全是预期的,即:ng-click="removeTask(5)"。然而……它什么都没做。

当然我可以写代码来获取任务。从$tasks数组甚至DOM中删除id,但这看起来不像Angular的方式。

那么,如何将动态内容添加到ng-repeat循环内的ng-click指令?


当前回答

同样值得注意的是,对于那些在搜索中发现这个的人来说,这个…

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

注意ng-click的值。传递给goTo()的参数是来自绑定对象(按钮)属性的字符串,但它没有被引号括起来。看起来AngularJS为我们处理了这个。我在这上面耽搁了几分钟。

其他回答

而不是

<button ng-click="removeTask({{task.id}})">remove</button>

这样做:

<button ng-click="removeTask(task.id)">remove</button>

请看这把小提琴:

http://jsfiddle.net/JSWorld/Hp4W7/34/

有一件事真的让我很困扰,当我在浏览器中检查这个html时,并没有看到它扩展成这样:

<button ng-click="removeTask(1234)">remove</button>

我看到:

<button ng-click="removeTask(task.id)">remove</button>

然而,后者是可行的!

这是因为你在“Angular世界”中,当你在ng-click=""里面时,Angular已经知道任务了。我就像你在模型里一样。不需要像{{}}那样使用数据绑定。

此外,如果你想传递任务对象本身,你可以喜欢:

<button ng-click="removeTask(task)">remove</button>

这个作品。谢谢。我正在注入自定义html并在控制器中使用angular编译它。

        var tableContent= '<div>Search: <input ng-model="searchText"></div>' 
                            +'<div class="table-heading">'
                            +    '<div class="table-col">Customer ID</div>'
                           + ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';

            $timeout(function () {
            var linkingFunction = $compile(tableContent);
            var elem = linkingFunction($scope);

            // You can then use the DOM element like normal.
            jQuery(tablePanel).append(elem);

            console.log("timeout");
        },100);

HTML:

<div  ng-repeat="scannedDevice in ScanResult">
        <!--GridStarts-->
          <div >
              <img ng-src={{'./assets/img/PlaceHolder/Test.png'}} 
                   <!--Pass Param-->
                   ng-click="connectDevice(scannedDevice.id)"
                   altSrc="{{'./assets/img/PlaceHolder/user_place_holder.png'}}" 
                   onerror="this.src = $(this).attr('altSrc')">
           </div>    
 </div>

Java脚本:

   //Global Variables
    var  ANGULAR_APP = angular.module('TestApp',[]);

    ANGULAR_APP .controller('TestCtrl',['$scope', function($scope) {

      //Variables
      $scope.ScanResult = [];

      //Pass Parameter
      $scope.connectDevice = function(deviceID) {
            alert("Connecting : "+deviceID );
        };
     }]);

同样值得注意的是,对于那些在搜索中发现这个的人来说,这个…

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

注意ng-click的值。传递给goTo()的参数是来自绑定对象(按钮)属性的字符串,但它没有被引号括起来。看起来AngularJS为我们处理了这个。我在这上面耽搁了几分钟。