組件負載angularjs

我的角度JS組件的工作有兩個組成部分，將調用時各自的按鈕被點擊組件負載angularjs

問題：當頁面加載這兩個組件被初始化，但在現實他們應該當我各個部件上點擊例子進行初始化：

的index.html

<div class='breadcrumbs'> 
    <div class='inner'> 
     <ul class='cf' style=" margin-top: 0px;"> 
     <li ng-click="WizardsViewerCtrl.createFirst()"> 

     </li> 
     <li ng-click="WizardsViewerCtrl.createSecond()"> 
     <span>Arrange Questions</span> </a> 

     </li> 

     </ul> 
    </div> 
</div> 

     <div ng-show="viewFirstRoute"> 
     <first-component></first-component> 
     </div> 
     <div ng-show="viewSecondRoute"> 
     <second-component></second-component> 

     </div>

個index.js

$scope.viewFirstRoute=false; 
$scope.viewSecondRoute=false; 



function createFirst() { 

    $scope.viewFirstRoute=true; 
    $scope.viewSecondRoute=false; 


} 

function createSecond() { 
    $scope.viewFirstRoute=false; 
    $scope.viewSecondRoute=true; 


}

問題是此頁的index.html被加載時，兩種組分都被初始化

first.component.js

angular 
.module('AOTC') 
.component('firstComponent', { 
     templateUrl: 'first.html', 
     controllerAs: 'firstCtrl', 
     controller:(function ($scope) { 
      console.log("first component loaded");//it prints while index.html is loaded even i didn't clicked on this component 
      })});

第二.component.js

angular 
.module('AOTC') 
.component('secondComponent', { 
     templateUrl: 'second.html', 
     controllerAs: 'secondCtrl', 
     controller:(function ($scope) { 
      console.log("second component loaded");//it prints while index.html is loaded even i didn't clicked on second component 
      })});

總結：當我點擊相應的組件上同樣的路線兩個組件必須進行初始化，但行爲注意到組件只要航線裝載它不關心點擊加載，請參閱評論在JS文件中

來源

2017-07-04 Kumail Hussain

使用ng-if代替ng-show。它應該解決這個問題。

<div ng-if="viewFirstRoute"> 
     <first-component></first-component> 
</div> 
<div ng-if="viewSecondRoute"> 
    <second-component></second-component> 
    </div>

NG-顯示：它會增加組件DOM而將其顯示屬性設置爲無。
ng-if：將有條件地從DOM中添加或刪除組件。

來源

2017-07-04 05:15:21 Ved

組件負載angularjs

回答

相關問題