Question

Angular指令不适用于以下情况。在我的下面角度应用程序中，我有两种我希望显示的项目，它们存储在控制器中。为了显示它们，我已经为这两种情况创建了指令，并使用ng-repeat迭代了列表，但是这些项目没有被渲染。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <style media="screen">
    .selected {
      background: #cdcdcd;
    }
  </style>
</head>

<body ng-app="myApp">

<div ng-controller="ListController as listctrl">

  <div class="" ng-repeat="item in listctrl.items">
    <itemtype1 ng-if="item.type_ === 'type1'" val="item.val"></itemtype1>
    <itemtype2 ng-if="item.type_ === 'type2'" val="item.val"></itemtype2>
  </div>


</div>

<script type="text/javascript">
angular
  .module('myApp',[])
  .controller('ListController', function($scope) {
    var listctrl = this;
    listctrl.items = [];

    listctrl.items.push({'val':'A', 'type_': 'type1'});
    listctrl.items.push({'val':'B', 'type_': 'type2'});
    listctrl.items.push({'val':'C', 'type_': 'type1'});
    listctrl.items.push({'val':'D', 'type_': 'type2'});
  })
  .directive('itemtype1', function() {

    return {

      template: '<strong>{{$scope.val}}</strong>',
      restrict: 'E',
      scope: {
        val: '='
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  })
  .directive('itemtype2', function() {

    return {

      template: '<i>{{$scope.val}}</i>',
      restrict: 'E',
      scope: {
        val: '='
      },
      link: function postLink(scope, element, attrs) {

      }
    };
  });
</script>

</body>
</html>

Answer 1

我的第一个猜测，只是浏览它，是你应该改变以下内容：

template: '<strong>{{$scope.val}}</strong>'

到此：

template: '<strong>{{val}}</strong>'

角度指令不起作用

1 个答案: