AngularJS onclickイベントで1つのアプリケーション内に2つのコントローラがある

私は単純な角度の例を行っていますが、なぜそれが機能していないのか分かりません。私はそれが失敗した場所を見つけたようだが、それはなぜではない。AngularJS onclickイベントで1つのアプリケーション内に2つのコントローラがある

Init(); 
 
Test1(); 
 
Test2(); //**DIRECTLY CALL THIS METHOD** 
 
     
 
function Init() { 
 
    window.app = angular.module('MyApp', []); 
 
} 
 
     
 
function Test1() { 
 
    app.controller('MySelectCtrl', function ($scope) { 
 
    alert(1); 
 
    }); 
 
} 
 
     
 
function Test2() { 
 
    app.controller('MySelectCtrl2', function ($scope) { 
 
    alert(2); 
 
}); 
 
}

<div data-ng-app="MyApp" > 
 
    <p> 
 
    <select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model"> 
 
    <option data-ng-repeat="option in MyNames" value="{{$index}}">{{MyNames}}</option> 
 
    </select> 
 
    </p> 
 
    
 
    <p> 
 
    <select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" > 
 
    <option data-ng-repeat="option in MyNames2" value="{{$index}}">{{MyNames2}}</option></option> 
 
    </select> 
 
    </p> 
 
</div>

が、これは動作しませんが（onclickの中にTest2関数を呼び出す）：

Init(); 
 
Test1(); 
 
//Test2(); **CALLING THIS THROUGH ONCLICK IN THE FIRST SELECT BELOW** 
 
    
 
function Init() { 
 
    window.app = angular.module('MyApp', []); 
 
} 
 
    
 
function Test1() { 
 
    app.controller('MySelectCtrl', function ($scope) { 
 
    alert(1); 
 
    }); 
 
} 
 
    
 
function Test2() { 
 
    app.controller('MySelectCtrl2', function ($scope) { 
 
    alert(2); 
 
    }); 
 
}

<div data-ng-app="MyApp" > 
 
    <p> 
 
    <select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model" onclick="Test2();"> 
 
    <option data-ng-repeat="option in MyNames" value="{{$index}}">{{MyNames}}</option> 
 
    </select> 
 
    </p> 
 
    
 
    <p> 
 
    <select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" > 
 
    <option data-ng-repeat="option in MyNames2" value="{{$index}}">{{MyNames2}}</option></option> 
 
    </select> 
 
    </p> 
 
</div>

これは仕事（直接使うにTest2関数を呼び出す）を行います

最初の選択をクリックしたときに警告（2）を実行するために、onclickでTest2（）を実行するにはどうすればよいですか？

注：上記は単なるテストです。実際には、最初の選択で何が選択されたかに応じて、2番目の選択にアイテムを挿入する（$ http ajax呼び出し）必要があります。そのデータをバインドするために別の方法を使用する必要がありますか？

出典

2016-10-12 AskPete

三角エドマール。私はあなたが期待する行動を与えることを、あなたのコードでPlunkrを作成しました：

https://plnkr.co/edit/aRr6JaTipXdTVACYOGuf?p=preview

注：メニューから離れてクリックするまで、最初のselect要素をクリックすると、第2の選択要素をロードしません（つまり、それを閉じる、または値を選択する）。単に最初の要素をクリックした後に2番目の要素をロードする場合は、 'data-ng-click'の代わりに 'data-ng-mousedown'を使用する必要があります。

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
     <script type="text/javascript"> 
      Init(); 

      function Init() { 
       window.app = angular.module('plunker', []); 

       /* 
       Overriding main components using pattern from 
       https://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm 
       */ 
       app.config(function ($controllerProvider, $provide, $compileProvider) { 
        console.log('config method ran'); 

        app._controller = app.controller; 
        app._service = app.service; 
        app.factory = app.factory; 
        app._value = app.value; 
        app._directive = app.directive; 

        // provider-based controller 
        app.controller = function (name, constructor) { 
         $controllerProvider.register(name, constructor); 
         return(this); 
        }; 

        // provider-based service 
        app.service = function (name, constructor) { 
         $provide.service(name, constructor); 
         return(this); 
        }; 

        // provider-based factory 
        app.factory = function (name, factory) { 
         $provide.factory(name, factory); 
         return(this); 
        }; 

        // provider-based value 
        app.value = function (name, value) { 
         $provide.value(name, value); 
         return(this); 
        }; 

        // provider-based directive 
        app.directive = function (name, factory) { 
         $compileProvider.directive(name, factory); 
         return(this); 
        }; 
       }); 

       app.controller('appCtrl', function ($scope) { 
        /* showSecondSelectCtrl will control when Angular loads the second select element into the DOM */ 
        $scope.showSecondSelectCtrl = false; 
        Test1(); 

        $scope.Test2 = function() { 
         console.log('adding MySelectCtrl2'); 
         app.controller('MySelectCtrl2', function ($scope) { 
          alert(2); 
          $scope.MyNames2 = ['nai', 'aru', 'machi']; 
         }); 
         $scope.showSecondSelectCtrl = true; 
        }    
       }); 
      } 

      /* Exposing this function on the global object is not "The Angular Way" of doing things. 
      Test1 should live inside of an Angular controller like Test2 does. */ 
      function Test1() { 
       console.log('adding MySelectCtrl'); 
       app.controller('MySelectCtrl', function ($scope) { 
        // alert(1); 
        $scope.MyNames = ['biff', 'marty', 'doc']; 
       }); 
      } 
     </script> 
    </head> 

    <!-- auto-bootstrap Angular app with the name of 'plunker' --> 
    <body data-ng-app="plunker"> 

     <!-- Specify a controller to allow dynamic rendering of second select element --> 
     <div data-ng-controller="appCtrl"> 
      <p> 
       <!-- Using Angular's ng-click directive since Test2 should live inside of appCtrl --> 
       <select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model" data-ng-click="Test2();"> 
        <option value="">My Names</option> 
        <option data-ng-repeat="option in MyNames" value="{{$index}}">{{option}}</option> 
       </select> 
      </p> 

      <!-- We cannot render the second select element until the 'MySelectCtrl2' controller exists. 
       Since we are dynamically loading it, we need to hide it from the DOM until it is loaded 
       using ng-if --> 
      <p data-ng-if="showSecondSelectCtrl"> 
       <select data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" > 
       <option value="">My Names2</option> 
       <option data-ng-repeat="option in MyNames2" value="{{$index}}">{{option}}</option> 
       </select> 
      </p> 
     </div> 
    </body> 
</html>

出典

2016-10-13 20:55:02

私はうまくいかないと思う。あなたのアプリケーションが既にブートストラップされた後に新しいコントローラを追加しようとしています（レイジーバインディング）。

この記事をご覧ください。それはあなたがそれを行うことができる方法を紹介します： https://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm

出典

2016-10-12 22:32:12

これは、このような「正常」な問題に対処するための非常に邪魔な方法のようです。別の方法でデータをバインドする必要がありますか？上記は単なるテストです。実際には、最初の選択で何が選択されたかに応じて、2番目の選択にアイテムを取り込みたいとします。 – AskPete

両方のモジュールを宣言してすぐにブートストラップすることができない理由はありますか？ –

いいえ解決策は1つのコントローラーと2つのモジュールのようです：https://jsfiddle.net/TheSharpieOne/Xku9z/1/ – AskPete

ソリューションは、1つのコントローラと二つのモジュールのようだ投稿者：リンクを使用してjsfiddle.net/TheSharpieOne/Xku9z/1

Populate Dropdown 2 based on Dropdown 1 selection

出典

2016-10-12 23:27:00 AskPete

AngularJS onclickイベントで1つのアプリケーション内に2つのコントローラがある

答えて

関連する問題