Question

我正在使用angular开发应用程序，我需要从Web服务中插入一些数据。我动态创建了div：

for(var i = 0 ; i < data.Output.length ; i++){   
          var listitem = document.createElement("div");
           listitem.setAttribute("ng-click","doMove()");
          listitem.className = "list-item";
          var name = document.createElement("span");
          name.className = "name"
          name.appendChild(document.createTextNode(data.Output[i].name));
          var link = document.createElement("a");
          link.appendChild(document.createTextNode('›'));


          listitem.appendChild(name);
          listitem.appendChild(link);
        wrapper.appendChild(listitem);
        }

问题是单击div不会触发该功能。

更新数据来自http请求。

更新2：将div放入：

     <div id = "wrapper">
--->
     </div>

我在cotroller中得到这样的日期：

var request = $http({
        method: "post",
        url: url",
        data: data,

        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        });

        request.success(function (data) {

        });

Answer 1

正如一条评论建议的那样，您应该尝试使用ng-repeat以声明方式执行此操作。但是，如果您在JS中坚持这样做，那么您应该制定一个指令。为了将angular-ish结构附加到指令的新创建的DOM内容，您需要使用$compile服务。

ng-repeat

<div ng-repeat="item in data.output">
    <div class="list-item" ng-click="doMove()">
        <span>...</span>
    </div>
</div>

对于指令方法，在你的链接功能中你做同样的事情，但是使用这样的服务：

 function linkFunc($scope, elem, attrs){

     //make sure to inject the $compile service in your directive
     $compile( elem )( $scope )

 }

Answer 2

尝试使用ng-repeat。我假设您使用的是$scope而不是controller as：

<div ng-repeat="d in data.Output" ng-show="data" ng-click="doMove()">
    <span>{{d.name}}</span>
</div>

仅在设置ng-show="data"时使用data，div才会显示。因此，默认情况下false或null或undefiend。

Answer 3

我很快就让你成了一名傻瓜。 http://plnkr.co/edit/S5Ch8yGS1eNabJ0SWgBx?p=preview

angular.module('plunker', []);

angular.module('plunker')
  .component('list', {
    controller: 'ListController',
    templateUrl: 'list.html'
  })
  .controller('ListController', function() {
    this.listItems = [
      { name: 'item 1', value: 'Description to describe the item.' },
      { name: 'item 2', value: 'Description to describe the item.' },
      { name: 'item 3', value: 'Description to describe the item.' },
      { name: 'item 4', value: 'Description to describe the item.' },
      { name: 'item 5', value: 'Description to describe the item.' }
    ];
  });

<ul class="list">
  <!-- When using a Component, the controllers alias is "$ctrl" by default. -->
  <li ng-repeat="item in $ctrl.listItems">
    <strong>{{ item.name }}</strong>
    {{ item.value }}
  </li>
</ul>

ng-click无法处理动态div

3 个答案: