Javascript AngularJS-从AJAX异步加载控制器而不更改路由

我想在ajax调用呈现新视图（HTML）时动态加载angular控制器

以下是我所拥有的：

视图的示例。来自AJAX的HTML代码片段

    <!-- CVS Pharmacy Extracare - Add View -->

<div ng-controller="cvsViewCtrl" class="container-fluid">
  <div class="col-md-8 col-md-offset-2">
    <h3 id="asset-title" class=""></h3>
    <br>
    <p>Member ID</p>
    <input class="input-s1 block-elm transition" type="text" placeholder=""/>
    <br>

    <input class="add-asset-btn btn btn-success block-elm transition" type="button" value="Add Asset!" ng-click="prepareCVS();"/>
  </div>
</div>

以及加载它们的函数

$scope.setAddAssetView = function(a) {
      console.log(a);

      if($scope.currentAddView == a) {
        console.log('view already set');
        return;
      }

      $scope.currentAddView = a;

      $('#main-panel').html('');
      $http({
        method: 'POST',
        url: '/action/setaddassetview',
        headers: {
          'Content-Type': 'application/json',
        },
        data: {
          asset: a,
        }
      }).then(function(resp){
        // Success Callback
        // console.log(resp);
        var index = resp.data.view.indexOf('<s');
        var script = resp.data.view.slice(index);
        var html = resp.data.view.replace(script, '');

        $('#main-panel').html( html );
        $('#asset-title').text(a.name);

        var indexTwo = a.view.indexOf('/add');
        var scriptLink = insertString(a.view, indexTwo, '/scripts').replace('.html', '.js').replace('.', '');
        console.log( scriptLink );
        window.asset = a;

        $.getScript(scriptLink, function(data, textStatus, jqxhr){
          console.log('loaded...');
        })

      },
      function(resp){
        // Error Callback
        console.log(resp);
      });
    }

---

这会为脚本添加正确的链接，但仍然无法初始化。如何解决此问题？

在应用程序中进行此更改，并确保在呈现带有ng控制器的html之前加载控制器文件

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

App.config(["$controllerProvider", function($controllerProvider) {

    App.register = {
        controller: $controllerProvider.register,
    }

}]);

App.register.controller('cvsViewCtrl', ['$scope', '$http', function($scope, $http){
    console.log('cvs view loaded');

    $scope.prepareCVS = function() {
      console.log('admit one');
    }
}]);

---

这实际上不是处理事情的正确方式

如果使用ui路由器进行路由，则可以在resolve函数中加载控制器。这是一个很好的服务

这可以通过以下方式实现：

var app = angular.module('myApp', [
    'ui.router',
    'oc.lazyLoad',
]);

angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'app/views/main.view.html',
            controller: 'mainCtrl',
            resolve: {
                loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load('app/ctrls/main.ctrl.js');
                }],
            }
        })
        .state('second', {
            url: '/second',
            templateUrl: 'app/views/second.view.html',
            controller: 'secondCtrl',
            resolve: {
                loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load('app/ctrls/controller_TWO.ctrl.js');
                }],
            }
        })

});

---

当您从一个路由更改为另一个路由时，将在加载html之前触发解析，并且控制器将正确注册。

谢谢！我要试试这个。哪个部分在单独的控制器文件中？或者它们都在主应用程序文件中吗？@ryanwaite28，实际上你的应用程序定义和app.config都在你的app.js文件中，你可以将你的cvsViewCtrl代码放在任何文件中！它实际上对我不起作用（我可能做得不对），但谢谢！我下次再试。事实上，我找到了一个到目前为止效果不错的替代方案。谢谢

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

App.config(["$controllerProvider", function($controllerProvider) {

    App.register = {
        controller: $controllerProvider.register,
    }

}]);

App.register.controller('cvsViewCtrl', ['$scope', '$http', function($scope, $http){
    console.log('cvs view loaded');

    $scope.prepareCVS = function() {
      console.log('admit one');
    }
}]);

var app = angular.module('myApp', [
    'ui.router',
    'oc.lazyLoad',
]);

angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'app/views/main.view.html',
            controller: 'mainCtrl',
            resolve: {
                loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load('app/ctrls/main.ctrl.js');
                }],
            }
        })
        .state('second', {
            url: '/second',
            templateUrl: 'app/views/second.view.html',
            controller: 'secondCtrl',
            resolve: {
                loadCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load('app/ctrls/controller_TWO.ctrl.js');
                }],
            }
        })

});