角度1.5のng-repeatの中で動作する新しいタブ機能を取得する

私は幾分角度があり、それでも私の頭を包み込むことを試みています。角度1.5のng-repeatの中で動作する新しいタブ機能を取得する

とにかく、動的に作成されたリンクのリストに新しいタブボタンを追加しようとしています。新しいタブ関数の名前をリンクオブジェクトの文字列として追加しましたが、これは機能しません。間違った方法で接近しているように感じます。

ご協力いただければ幸いです。

//controller 
angular.module("myApp") 
.controller("nav", ["$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()'} 
        ]} 

    ]; 
}]) 

//view 
<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="{{childNav.tab}}"></button> 
      </li> 
     </ul> 
    </li> 
</ul>

出典

2016-07-08 BobSacamano

このスニペットをご覧ください。私の勧告

そのは$に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>

出典

2016-07-08 03:52:46 Srijith

角度1.5のng-repeatの中で動作する新しいタブ機能を取得する

答えて

関連する問題