Javascript Angularjs动态添加控制器

看起来这个问题已经问了好几次了，但是没有正确的答案

我的案例：我正在使用ajax（出于某种原因不使用角度路由）将一个模板（带有html和脚本）init加载到div

index.html（main）

网状物
加载模板
角度.module（'app'，[]）
.controller（'AppCtrl'，函数（$scope）{
$scope.someData={}；
$scope.loadTemplate=函数（）{
....
//AJAX来获取templat.html
//并将其加载到动态内容中
//然后应用范围（）；
}
});

template.html（模板）

关于
{{total}}
检验总数

更新
console.log（'begin'）
角度。模块（'app'）
.controller（'TempCtrl'，函数（$scope）{
$scope.total=0；
console.log（'inside'）
$scope.update=函数（）{
$scope.total+=1；
};
});
console.log（'end'）

当我单击按钮

Load Template

时，它会将

Template.html

文件加载到容器中，但我发现了错误

错误：[]参数“TempCtrl”不是函数，未定义

尽管它被添加到应用程序控制器中

如何动态添加控制器并使其与动态html节点一起工作

---

此处演示

尝试在index.html而不是template.html中加载templates控制器，这样在标记查找它时它就已经存在了。 在index.html脚本部分：

  angular.modules('app', [])
        .controller('AppCtrl', function ($scope) {
            $scope.someData = {};
            $scope.loadTemplate = function() {
                ....
                //AJAX to get the templet.html
                //and load it into .dynamic-content
                //then applying scope();                  
            }
        }).controller('TempCtrl', function ($scope) {
    $scope.total = 0;
    console.log('inside')
    $scope.update = function () {
        total += total;
    };
});

编辑：

---

当有多个引用应用程序模块的JS文件时，这会很方便，这样每个文件都拥有一个控制器。

本博客介绍了如何摆弄angular，以迫使它在引导后加载其他控制器：

当然，这是完全不受支持的，并且可以随时通过更改角度来打破

但是，以下是使用此方法的代码的更新版本：

var app = angular.module('app', [])
app.config(
  function($controllerProvider, $provide, $compileProvider) {
    // Since the "shorthand" methods for component
    // definitions are no longer valid, we can just
    // override them to use the providers for post-
    // bootstrap loading.
    console.log("Config method executed.");
    // Let's keep the older references.
    app._controller = app.controller;
    app._service = app.service;
    app._factory = app.factory;
    app._value = app.value;
    app._directive = app.directive;
    app.controller = function(name, constructor) {
      console.log("controller...");
      console.log(name);
      console.dir(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, $http, $compile) {
  $scope.someData = {};
  $scope.loadTemplate = function() {
    $http.get("template.html")
      .then(function(r) {
        // load in the html, including the script, which will be executed
        $(".dynamic-content").html(
          r.data
        );
        // compile the loaded html into an actual template and put it back where it was
        $(".dynamic-content").html($compile($(".dynamic-content").html())($scope));
      })
  }
});

请注意，我使用jQuery将HTML放入DOM，导致脚本执行，然后将HTML从DOM中提取出来，以便对其进行编译，然后再次将其放入DOM中

此外，您的template.html中还有一个未定义的变量，因此我将其更新为如下所示：

<script>
    console.log('begin')
    angular.module('app')
    .controller('TempCtrl', function ($scope) {
        $scope.total = 0;
        console.log('inside')
        $scope.update = function () {
            $scope.total += 1;
        };
    });
    console.log('end')
</script>

<div ng-controller="TempCtrl">
    <h2>About</h2>
    <h3>{{total}}</h3>
    <p>Testing the total</p>
    <button ng-click="update()">Update</button>
</div>

console.log（'begin'）
角度。模块（'app'）
.controller（'TempCtrl'，函数（$scope）{
$scope.total=0；
console.log（'inside'）
$scope.update=函数（）{
$scope.total+=1；
};
});
console.log（'end'）
关于
{{total}}
检验总数

更新

下面是一个工作示例：

使用角度组件支持更新的示例

app.config(
  function ($controllerProvider, $provide, $compileProvider) {

    var app = angular.module('app');

    // Let's keep the older references.
    app._controller = app.controller;
    app._service = app.service;
    app._factory = app.factory;
    app._value = app.value;
    app._directive = app.directive;
    app._component = app.component;

    // 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 );
    };
    // Provider-based component.
    app.component = function (name, options) {
        $compileProvider.component(name, options);
        return ( this );
    };

});

---

因此，您正在加载ajax，试图将新控制器添加到现有模块中，“开始”和“结束”显示在您的控制台中，指示脚本正在执行？您是否尝试过将脚本放在模板的HTML部分之前？是的，控制台显示的是

begin

和

end

，但里面没有

。

@Dave是的，我试过这样做，但同样的错误实际上这可能会起作用：我的问题是如何添加动态控制器，而不是如何让这个示例工作..我只是好奇，你想从中得到什么好处？就像我提到的。。我有50多个模板文件，每个模板都有自己的控制器。所以不能把它们都放在一个文件中，一次加载。我是如何找到解决方案并更新我的plunker Perfect的。这正是我想要的。。谢谢你，戴夫。

<script>
    console.log('begin')
    angular.module('app')
    .controller('TempCtrl', function ($scope) {
        $scope.total = 0;
        console.log('inside')
        $scope.update = function () {
            $scope.total += 1;
        };
    });
    console.log('end')
</script>

<div ng-controller="TempCtrl">
    <h2>About</h2>
    <h3>{{total}}</h3>
    <p>Testing the total</p>
    <button ng-click="update()">Update</button>
</div>

app.config(
  function ($controllerProvider, $provide, $compileProvider) {

    var app = angular.module('app');

    // Let's keep the older references.
    app._controller = app.controller;
    app._service = app.service;
    app._factory = app.factory;
    app._value = app.value;
    app._directive = app.directive;
    app._component = app.component;

    // 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 );
    };
    // Provider-based component.
    app.component = function (name, options) {
        $compileProvider.component(name, options);
        return ( this );
    };

});