在Angular 1.5中使用new-tab函数在ng-repeat内部工作

时间:2016-07-08 03:20:08

标签: angularjs

我对角度有些新意,仍然试图绕着它缠绕。

无论如何,我正在尝试将新标签按钮添加到动态创建的链接列表中。我在链接对象中添加了新选项卡函数的名称作为字符串,但这不起作用,我觉得我正在以错误的方式接近它。

非常感谢任何帮助。

IE (internet explorer)

1 个答案:

答案 0 :(得分:1)

查看此代码段。我的建议

  • 不建议使用$ eval但是如果你想将字符串作为一个函数进行评估,那就是这样做的方法
  • 在旁注中,当您拥有来自控制器的值时,请使用ng-href。



angular.module("myApp", [])
  .controller("navCtrl", ["$scope", "$window",
    function($scope, $window) {

      $scope.newTabOne = function() {
        $window.open('http://example.com/#/1', '_blank');
        return $scope;
      };
      $scope.newTabTwo = function() {
        $window.open('http://example.com/#/2', '_blank');
        return $scope;
      };
      $scope.newTabThree = function() {
        $window.open('http://example.com/#/3', '_blank');
        return $scope;
      };

      $scope.links = [{
          name: 'Home',
          link: '#/Home',
          children: []
        }, {
          name: 'Drop Down 1',
          link: '',
          children: [{
            name: 'One',
            link: '#/1',
            children: [],
            tab: 'newTabOne()'
          }, {
            name: 'Two',
            link: '#/2',
            children: [],
            tab: 'newTabTwo()'
          }]
        }, {
          name: 'Drop Down 2',
          link: '',
          children: [{
            name: 'Three',
            link: '#/3',
            children: [],
            tab: 'newTabThree()'
          }]
        }

      ];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="navCtrl">
    <ul class="nav-list">
      <li ng-repeat="nav in links">
        <a href="{{nav.link == '' ? 'javascript:;' : nav.link}}">
          <span class="text">{{topNav.name}}</span>
          <i ng-if="nav.children.length > 0" class="arrow fa fa-angle-right right"></i>
        </a>
        <ul ng-if="nav.children.length > 0" class="inner-drop list-unstyled">
          <li ng-repeat="childNav in nav.children">
            <a href="{{childNav.link}}">
              <span class="text">{{childNav.name}}</span>
            </a>
            <button ng-click="$eval(childNav.tab)">in New Window</button>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>
&#13;
&#13;
&#13;