在[备忘录]中，使用AngularJS动态添加控制器

2 年 ago
宇, 华
2 minutes

希望通过事件动态加载控制器，但是在执行angular.bootstrap()后，即使通过app.controller(‘XXX’)进行添加，也会出现Error: [ng:areq] Argument ‘XXX’ is not a function, got undefined的错误。

请将以下内容用汉语进行同义转述： ↓

请将以下内容用中文进行同义转述。

使用angular.config()方法来设置controllerProvider，然后使用controllerProvider.register()方法进行添加。

– 示例

在下面的HTML代码的HogeController#doClick()中动态添加元素，
当点击其中的按钮时触发事件。

<!DOCTYPE html>
<html lang="ja" >
  <head>
    <meta charset="utf-8">

    <title>angular test 1</title>
    <script src="dist/js/lib/jquery/jquery-2.1.0.js"></script>
    <script src="dist/js/lib/angularjs/angular.js"></script>
    <script src="dist/js/app/main.js?hoge"></script>

  </head>

  <body>
    <div ng-controller="HogeController as HogeC">
      <button type="button"  ng-click="HogeC.doClick()" >click</button>
    </div>
    <div>hello</div>
    <div>
      <testWidget/>
    </div>

  </body>
</html>

为了执行按钮点击事件，动态地将FugaController添加到testWidget。

<testWidgetSub ng-controller='FugaController'>
  <div >tttt
   <button type='button'ng-click='doFuga()'>Fuga!</buffon>
  </div>
</testWidgetSub>

以下是JavaScript的代码。


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

app.controller('HogeController' ,[
    '$scope', '$compile', 
    function($scope ,$compile ) {

        this.doClick = function() {
            console.log('click');

            var elm = angular.element('testWidget testWidgetSub');
            console.log(elm.size());


            if (elm.size() == 0) {
            // エレメントが、まだ、追加されてない場合

                // コントローラーを追加
                app.controllerProvider.register('FugaController', [
                    '$scope', '$compile',
                    function($scope ,$compile) {
                            $scope.doFuga = function() {
                                // fugaボタンを押した時のイベント
                                console.log('fuga controller clicked!!!');
                            };
                    }
                ]);

                var hoge = $compile("<testWidgetSub ng-controller='FugaController'><div >{{'tttt'}}<button type='button'ng-click='doFuga()'>Fuga!</buffon></div></testWidgetSub>")($scope);

                // 作ったエレメントのコンパイル
                app.directive('testWidgetSub' ,
                              function(scope) {
                                  scope.$apply();
                              });

                // エレメント追加                
                angular.element('testWidget').append(hoge);
                console.log('append testWidgetSub on testWidget!!!!!');
            } else {
                console.log('already append testWidgetSub....');
            }
        } 

    }
]);

// DOMのロード完了時に実行しないと、Chromeでエラーになる場合がある
// なので、とりあえず、jqueryで、angular.bootstrap()を、実行...
$(function() {
    // providerを登録
    app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide)
    {
        app.controllerProvider = $controllerProvider;
        app.compileProvider    = $compileProvider;
        app.filterProvider     = $filterProvider;
        app.provide            = $provide;
    });

    // bootstrap実行
    angular.bootstrap(document, ['app']);

    console.log("angular bootstrapped...");

});

在angular.module(‘app’)前声明之后，在进行bootstrap之前，需要执行app.config来设置controllerProvider。
在bootstrap之后，使用controllerProvider.register()来定义controller。

bannerAds