加载angularJs控制器

Load angularJs controller

本文关键字：控制器 angularJs 加载      更新时间：2023-09-26

我已经在单独的文件中声明了我的应用程序和控制器，下面是我如何加载我的控制器html DOM，但它没有显示该消息。有没有人能指导一下如何做到这一点。

HTML:

<div id="bnProblemList">
    <div ng-controller="problemListCtrl" data-ng-init="init()">
        <div ng-view="">this is my message = {{message}}</div>
    </div>
</div>

JS: 

html = $j('#bnProblemList').html();
$compile(html)(scope);

请让我知道如何注入或加载ng-controller html动态。

您的控制器声明错误。你应该这样做:

var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope', 
  function($scope) {
      $scope.message = "This is my message :-)";
  }
]);

正确的方法是将Controller声明为一个匿名函数，并将其添加到模块中。然后，你需要设置ngApp。

Controller.js

这里，我们将声明我们的控制器，并创建一个app模块。然后，我们将ctrl声明为app模块中的控制器。

  (function(){
  function Controller($scope) {
    $scope.name = 'toto';
  }
  angular
  .module('app', [])
  .controller('ctrl', Controller);
  })();


  <body ng-app='app' ng-controller="ctrl">
    <p>My name is {{name}}</p>
 </body>

不要忘记包括你的脚本标签: 

<script src="controller.js"></script>

您可以尝试如下示例:-

Html页面:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
 <title> Controller</title>  
 <script src="../Js/angular.min.js"></script>
 <script src="../Js/Controller.js"></script>   
</head>
<body>
  <div ng-controller="MyFirstController">
    {{ Msg }}
  </div>
</body>
</html>

ControllerJs页面:

var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
  $scope.Msg="Hello First Conroller";
})

i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
    <div ui-view=''></div>
</div>
<script>
    angular.element(document).injector().invoke(function($compile, $state) {
        $state.go('myCtrl');
        var scope = angular.element($j("#bn")).scope();
        $compile($j("#bn"))(scope);
    });
</script>
相关文章：