条件に基づいてng-controllerをインスタンス化する方法

私はこの質問をしましたが、私が求めている特定の質問は劇的に変化しました。条件に基づいてng-controllerをインスタンス化する方法

私は、コードの一部を持っている：

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

このコードは、2つのHTMLページ内に注入されます。 1ページは既にPingsCtrlに電話しています。もう片方はしません。私は実際にこのコードをDRYにしておきたいと思っています。私は上記のコードを参照したいだけです。

を生成するために上記のコードを書くには、PingsCtrlがまだインスタンス化されていない場合はどうすればよいですか。

ここに2つの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

サービスを利用するだけです。これは実際にページ間で共通のデータと機能を持つための意図された構造です。

あなたが試みていた問題の一部は、コントローラを保存しているかどうかにかかわらず、Angularはそれに従わない独自の管理を持ち、あなたなしではコンポーネントをリフレッシュします。あなたはあなたが見ているページと実際には一致しない$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の外にドロップされた場合、これは動作します。

ここはプランナーです。

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

出典

2016-01-02 13:40:06 matthewdaniel

あなたのPlunkerデモでコントローラーが再インスタンス化されています。コントローラーの再利用を示す特別な方法はありますか？また、グローバルコントローラの使用には注意が必要です。 IIRC、彼らは非難され、落胆するはずです。 –

プランナー上でコンソールを開くと、iコンソールがインスタンシエーションを記録するので、各ページがコントローラを一度インスタンス化していることがわかります。また、私は定期的なコントローラではなく、単にグローバルコントローラと呼ぶ機能を提案していません。グローバルに私が気づいていない機能を含める場合、CommonCoreをccと呼んでください。 – 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-controllerをインスタンス化する方法

答えて

関連する問題