使用 angular 在附加的 html 上运行 JS

Question

您好，我想使用 angularJS 重新创建以下内容。

  <div>
    <fieldset class="regulated">
        <legend>This list was created with html</legend>
        <ul>
            <li>
                <h4>Category1</h4>
                <ul>
                    <li>
                        <h5>Element1</h5>
                        <p>Description of Category 1 Element 1</p>
                    </li>
                    <li>
                        <h5>Element2</h5>
                        <p>Description of Category 1 Element 2</p>
                    </li>
                    <li>
                        <h5>Element1</h5>
                        <p>Description of Category 1 Element 3</p>
                    </li>
                </ul>
            </li>
            <li>
                <h4>Element2</h4>
                <p>Description of element 2</p>
            </li>
            <li>
                <h4>Category2</h4>
                <ul>
                    <li>
                        <h5>Element1</h5>
                        <p>Description of Category 2 Element 1</p>
                    </li>
                    <li>
                        <h5>Element2</h5>
                        <p>Description of Category 2 Element 2</p>
                    </li>
                </ul>
            </li>
        </ul>
    </fieldset>
</div>

以下是我的尝试方式以及到目前为止取得的成就。这是调用我的控制器的 html。

 <div>
    <fieldset class="regulated" ng-controller="UlController2">
        <legend>{{information.header}}</legend>
        <ul>
            <li ng-repeat="item in items">
                <h4>{{item.name}}</h4>
                <div ng-bind-html="element(item.followUp)"></div>
            </li>
        </ul>
    </fieldset>
</div>

这是我正在使用的控制器。

 app.controller('UlController2', function($scope,$sce) {
    $scope.information = {
        header : "This list was created with angular!"
    };
    $scope.items = [
        {'name' : 'Category1', 'followUp' : '<ul></ul>'},
        {'name' : 'Element2', 'followUp' : '<p>Description of element 2</p>'},
        {'name' : 'Category2', 'followUp' : '<ul></ul>'}
    ];
    $scope.elEments = [
        {'name':'Element1','description':'Description of Category 1 Wlement 1'},
        {'name':'Element2','description':'Description of Category 1 Wlement 2'},
        {'name':'Element3','description':'Description of Category 1 Wlement 3'},
    ];
    $scope.element = function(input){
        return $sce.trustAsHtml(input);
    }
});

我想在没有任何 JQuery 或本机 JavaScript 的情况下进行此操作，只有 AngularJS 个本机方法。

Answer 1

你那里的数据不可能，因为你没有关于该类别的信息。这对我们来说也很困难，因为您在控制器中的变量名称与视图中的变量名称不匹配。除此之外，如果你有关于类别的信息，你可以用两个嵌套的 ng-repeat.

angular.module('testApp', [])
  .controller('testCtrl', ['$scope',
      function($scope) {
        $scope.categories = [
          {
            name: 'Category 1',
            items: [
              {
                name: 'Element1',
                description: 'Description of Category 1 Element 1'
              }, 
              {
                name: 'Element2',
                description: 'Description of Category 1 Element 2'
              }, 
              {
                name: 'Element3',
                description: 'Description of Category 1 Element 3'
              }
            ]
          },
          {
            name: 'Category 2',
            items: [
              {
                name: 'Element1',
                description: 'Description of Category 2 Element 1'
              }, 
              {
                name: 'Element2',
                description: 'Description of Category 2 Element 2'
              }, 
              {
                name: 'Element3',
                description: 'Description of Category 2 Element 3'
              }
            ]
          }
        ]
      }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <fieldset class="regulated">
    <legend>This list was created with angular</legend>
    <ul>
      <li ng-repeat="category in categories">
        <h4>{{category.name}}</h4>
        <ul>
          <li ng-repeat="item in category.items">
            <h5>{{item.name}}</h5>
            <p>{{item.description}}</p>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
</div>

Answer 2

我找到了 2 个解决方案，都是在 angular 1.3.8 中编写的。第一个基于 Marcel 的回答，另一个是我的。

这是基于马塞尔：

app.controller('UlController2', function($scope, $sce) {
  $scope.information = {
    header: "This 2nd list was created with angular!"
  };
  $scope.items = [{
    'name': 'Category1',
    'innerList': [{
      'name': 'Element1',
      'description': 'Description of Category 1 Element 1'
    }, {
      'name': 'Element2',
      'description': 'Description of Category 1 Element 2'
    }, {
      'name': 'Element3',
      'description': 'Description of Category 1 Element 3'
    }, ]
  }, {
    'name': 'Element2',
    'followUp': 'Description of element 2'
  }, {
    'name': 'Category2',
    'innerList': [{
      'name': 'Element1',
      'description': 'Description of Category 2 Element 1'
    }, {
      'name': 'Element2',
      'description': 'Description of Category 2 Element 2'
    }]
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div>
  <fieldset class="regulated long">
    <legend>This 2nd list was created with html</legend>
    <ul>
      <li>
        <h4>Category1</h4>
        <ul>
          <li>
            <h5>Element1</h5>
            <p>Description of Category 1 Element 1</p>
          </li>
          <li>
            <h5>Element2</h5>
            <p>Description of Category 1 Element 2</p>
          </li>
          <li>
            <h5>Element1</h5>
            <p>Description of Category 1 Element 3</p>
          </li>
        </ul>
      </li>
      <li>
        <h4>Element2</h4>
        <p>Description of element 2</p>
      </li>
      <li>
        <h4>Category2</h4>
        <ul>
          <li>
            <h5>Element1</h5>
            <p>Description of Category 2 Element 1</p>
          </li>
          <li>
            <h5>Element2</h5>
            <p>Description of Category 2 Element 2</p>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
</div>
<div>
  <fieldset class="regulated long" ng-controller="UlController2">
    <legend>{{information.header}}</legend>
    <ul>
      <li ng-repeat="item in items">
        <h4>{{item.name}}</h4>
        <p>{{item.followUp}}</p>
        <ul>
          <li ng-repeat="Li in item.innerList">
            <h5>{{Li.name}}</h5>
            <p>{{Li.description}}</p>
          </li>
        </ul>
      </li>
    </ul>
  </fieldset>
</div>

这是我的，模拟阅读 JSON 回复。

app.controller('UlController3', function($scope, $sce) {
  $scope.information = {
    header: "This 3rd list was created with angular!"
  };
  var items = [{
    'name': 'Category1',
    'innerList': [{
      'name': 'Element1',
      'description': 'Description of Category 1 Element 1'
    }, {
      'name': 'Element2',
      'description': 'Description of Category 1 Element 2'
    }]
  }, {
    'name': 'Element2',
    'followUp': 'Description of element 2'
  }];
  $scope.innerUl = function() {
    var toAdd = '';
    var inner = '';
    angular.forEach(items, function(value, key) {
      angular.forEach(value, function(firstLiVal, key) {
        if (key == 'name') {
          toAdd += '<li><h4>' + firstLiVal + '</h4>';
        } else if (key == 'followUp') {
          toAdd += '<p>' + firstLiVal + '</p></li>';
        } else if (key == 'innerList') {
          angular.forEach(firstLiVal, function(SecondUlVal, key) {
            angular.forEach(SecondUlVal, function(SecondLiVal, key) {
              if (key == 'name') {
                inner += '<li><h5>' + SecondLiVal + '</h5>';
              } else {
                inner += '<p>' + SecondLiVal + '</p></li>';
              }
            });
          });
          toAdd += '<ul>' + inner + '</ul></li>';
        }
      });
    });
    return $sce.trustAsHtml(toAdd);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div>
  <fieldset class="regulated long">
    <legend>This 3rd list was created with html</legend>
    <ul>
      <li>
        <h4>Category1</h4>
        <ul>
          <li>
            <h5>Element1</h5>
            <p>Description of Category 1 Element 1</p>
          </li>
          <li>
            <h5>Element2</h5>
            <p>Description of Category 1 Element 2</p>
          </li>
        </ul>
      </li>
      <li>
        <h4>Element2</h4>
        <p>Description of element 2</p>
      </li>
    </ul>
  </fieldset>
</div>
<div>
  <fieldset class="regulated long" ng-controller="UlController3">
    <legend>{{information.header}}</legend>
    <ul ng-bind-html='innerUl()'></ul>
  </fieldset>
</div>

使用 angular 在附加的 html 上运行 JS

Run JS on appended html with angular

javascript

angularjs