如何根據條件實例化ng控制器

我問了這個問題，但我提出的具體問題發生了巨大變化。如何根據條件實例化ng控制器

我有一段代碼：

<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}"> 
    <h1 ng-click="pings.press()">asdf</h1> 
    </div>

此代碼注入到兩個HTML頁面。一頁已經呼叫PingsCtrl。另一個沒有。我真的想保持這個代碼幹，我只想有一個上面的代碼引用。

如何在PingsCtrl尚未實例化的情況下如何編寫上述代碼以生成ng-controller。

這裏有兩個HTML頁面。

HTML

// First page 
<html ng-app="coolApp"> 
    <div ng-controller="PingsCtrl as pings"> 
    <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}"> 
     <h1 ng-click="pings.press()">asdf</h1> 
    </div> 
    </div> 
</html> 

// Second page 
<html ng-app="coolApp"> 
    <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}"> 
    <h1 ng-click="pings.press()">asdf</h1> 
    </div> 
</html>

JavaScript是在這裏：

angular.module('coolApp', []) 

.controller('PingsCtrl', function() { 
    var vm = this; 

    vm.press = function() {alert(123)}; 
})

什麼問題，如何解決這一問題？

來源

2015-12-21 jason328

你可以把一個plunker或的jsfiddle之間的數據？ – SoluableNonagon

考慮將常用功能置於**工廠服務**中。他們是單身人士，只能自動加載一次。見https://docs.angularjs.org/guide/services#creating-services – georgeawg

我會盡量在一起放一些東西。我發佈的代碼是所有需要的。 – jason328

只需使用的服務。這實際上是在頁面之間具有共同數據和功能的預期結構。這個問題與您試圖什麼

的部分是，你是否沒有設法保存控制器，角度都有自己的管理，不會跟着你了，並且將令人耳目一新成分沒有你。你會遇到像$scope這樣的東西，它實際上並不匹配你正在查看的頁面，最終導致更多的問題，而不是它的價值。

來源

2015-12-30 20:07:58

我同意使用服務。在這一點上，如何實現這一點純粹是好奇心。 – jason328

我有一個解決方案，但我也附和別人的有關做法的擔憂。您可能希望擁有一個全局控制器，您可以將它放在身體上，以便在任何地方和大多數其他控制器中發生，並通過該控制器進行調用。例如

<body ng-controller="GlobalCtrl as gc"> 
    <h1 ng-click="gc.pingPress()"></h1> 
</body>

無論如何，這是我想出的。

<div ng-if="pings"> 
    <h1 ng-click="pings.press()">asdf</h1> 
</div> 
<div ng-if="!pings"> 
    <div ng-controller="PingsCtrl as pings"> 
     <h1 ng-click="pings.press()">asdf</h1> 
    </div> 
</div>

這將工作，如果它被放在現有的PingsCtrl內部或外部。

這裏是一個plunker。

https://plnkr.co/edit/4x0kSazcg0g0BsqPKN9C?p=preview

來源

2016-01-02 13:40:06 matthewdaniel

我看到控制器在您的Plunker演示中重新實例化。是否有一種特殊的方式來演示控制器的重用？另外，我會警惕使用全局控制器。 IIRC，他們應該被棄用和泄氣。 –

如果你在plunker上打開控制檯，你可以看到每個頁面都只是實例化控制器一次，因爲我在控制檯登錄實例。此外，我不建議任何功能，不只是一個常規的控制器，只是稱之爲全局控制器。如果全局意味着我不知道的功能，則將其稱爲CommonCore。 – matthewdaniel

你可能想仔細檢查一下。它記錄每個導航的「實例化」。 –

請檢查我的解決方案，看看如何共享控制器

var app = angular.module('myApp', []); 
 

 
app.controller("aCtrl", function ($scope, PingList) { 
 
    $scope.addPing = function() { 
 
    PingList.add('Ping A'); 
 
    }; 
 
}); 
 

 
app.controller("bCtrl", function ($scope, PingList) { 
 
    $scope.addPing = function() { 
 
    PingList.add('Ping B'); 
 
    }; 
 
}); 
 

 
app.factory('PingList', function() { 
 
    var pings = ['Ping1', 'Ping2']; 
 

 
    return { 
 
    add: function(ping) { 
 
     pings.push(ping); 
 
    }, 
 
    get: function() { 
 
     return pings; 
 
    } 
 
    }; 
 
}); 
 

 
app.directive('pingList', function(PingList) { 
 
    return { 
 
    restrict: 'EA', 
 
    link: function($scope) { 
 
     $scope.pings = PingList.get(); 
 
     $scope.press = function(ping) { 
 
     alert(ping); 
 
     } 
 
    }, 
 
    template: '<ul><li ng-repeat="ping in pings" ng-click="press(ping)">{{ping}}</li></ul>' 
 
    }; 
 
});

a, li { 
 
    cursor: pointer; 
 
} 
 

 
a { 
 
    color: blue; 
 
    text-decoration: underline; 
 
}

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

 
<div ng-app="myApp"> 
 
    <div ng-controller="aCtrl" style="float: left"> 
 
    <a ng-click="addPing()">click to add A ping</a> 
 
    <ping-list></ping-list> 
 
    </div> 
 
    <div ng-controller="bCtrl" style="float: right"> 
 
    <a ng-click="addPing()">click to add B ping</a> 
 
    <ping-list></ping-list> 
 
    </div> 
 
    <div style="clear: both"></div> 
 
</div>

來源

2016-01-03 08:18:26

如何根據條件實例化ng控制器

回答

相關問題