Question

我的Angular应用程序是使用此yeoman generator的样板开发的。

路由和所有工作正常但我无法在navbar-controller.js和footer-controller.js上工作$ scope。请告诉我您是否需要更多信息来提供相关信息。

的index.html

public DataSet DataforTable(string fundID, string fromDate, string toDate)
{
    string[] fundList = fundID.Split(',');
    DataSet full = new DataSet();
    DataTable ds = new DataTable();
    full.Tables.Add(ds);
    foreach (var fund in fundList)
    {        
        using (strCon)
        {
            SqlCommand cmd = new SqlCommand("[dbo].[z_Formulas2]", strCon);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter sda = new SqlDataAdapter(cmd);

            cmd.Parameters.Add(new SqlParameter("@Fund_ID", fund));
            cmd.Parameters.Add(new SqlParameter("@XFund_ID", ""));
            cmd.Parameters.Add(new SqlParameter("@Start_Dated", fromDate));
            cmd.Parameters.Add(new SqlParameter("End_Dated", toDate));

            sda.Fill(ds);
        }
    }
    return full;
}

导航栏-controller.js

<!DOCTYPE html>
<html lang='en' data-ng-app='app'>
  <head>
    <title>App</title>
    <meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'>
    <!-- inject:head:js -->
    <!-- endinject -->
    <!-- inject:html -->
    <!-- endinject -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body class="wrapper">

    <div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div>

    <!-- boxed-layout  -->
    <div class='container'>

      <!--=== Main Content ===-->
      <div data-ui-view></div>
      <!--=== End Main Content ===-->

    </div>

    <!-- <div id="footer"
        ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'">
    </div> -->

    <!-- bower:js -->
    <!-- endbower -->
    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>

导航栏-module.js

(function () {
  'use strict';

  angular
    .module('navbar')
    .controller('NavbarCtrl', NavbarCtrl);

  function NavbarCtrl() {
    var vm = this;
    vm.ctrlName = 'NavbarCtrl';

    this.loginHeader = function(){
      console.log("LOGIC called");
    }
  }
}());

导航栏-routes.js

(function () {
  'use strict';
  angular
    .module('navbar', [
      'ui.router'
    ]);
}());

导航栏-trl.html

(function () {
  'use strict';

  angular
    .module('navbar')
    .config(config);

  function config($stateProvider) {
    $stateProvider
      .state('navbar', {
        url: '/navbar',
        templateUrl: 'navbar/navbar.tpl.html',
        controller: 'NavbarCtrl',
        controllerAs: 'navbar'
      });
  }
}());

更新我找到了答案。谢谢大家。我想知道在其他控制器中我没有注入$ scope，因为我使用控制器作为语法并且它工作得很好。任何人都可以解释这背后的原因，为什么只有在navbar我需要注入$ scope？

Answer 1

你必须像这样初始化并注入$ scope：

(function(){
    'use strict';
    angular.module('navbar')
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', function($scope, otherDependecy){
        yourAwesomeCodeGoesHere();
        $scope.someObject = 'Hello world';
    }]);
})();

OR： （只提取控制器的主要功能）

(function(){
    'use strict';
    angular.module('navbar')
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', NavbarCtrl]);

    function NavbarCtrl($scope, otherDependecy){
        yourAwesomeCodeGoesHere();
        $scope.someObject = 'Hello world';
    }

})();

<强> @UPDATE：

你可能意味着指令的控制者？在这种情况下， $ scope 被初始化并自动注入，您只需要记住将 $ scope 添加为控制器功能的参数。就是这样。

Answer 2

您必须在控制器中注入$scope作为服务，如下所示：

<强>导航栏-controller.js

(function () {
  'use strict';

  angular
    .module('navbar')
    .controller('NavbarCtrl', NavbarCtrl);

  function NavbarCtrl($scope) { // $scope as a service of this controller
    var vm = this;
    vm.ctrlName = 'NavbarCtrl';

    this.loginHeader = function(){
      console.log("LOGIC called");
    }
  }
}());

更好的做法是在数组中传递服务，因此通过这样做可以在缩小的情况下更加安全，因为名称不会被覆盖。

<强>导航栏控制器阵列-services.js

(function () {
  'use strict';

  angular
    .module('navbar')
    .controller('NavbarCtrl', ['$scope', '$http', '$timeout', NavbarCtrl]);

  function NavbarCtrl($scope, $http, $timeout) { // $scope as a service of this controller
    var vm = this;
    vm.ctrlName = 'NavbarCtrl';

    this.loginHeader = function(){
      console.log("LOGIC called");
    }
  }
}());

确保您按照他们在控制器中的相同顺序注入服务。

希望它有所帮助。

Answer 3

在 navbar-controller.js

中注入$scope

(function () {
  'use strict';

  angular
    .module('navbar')
    .controller('NavbarCtrl','$scope', NavbarCtrl, $scope); // adding $scope in the 
                                                           //controller dependency list

  function NavbarCtrl() {
    var vm = this;
    vm.ctrlName = 'NavbarCtrl';

    this.loginHeader = function(){
      console.log("LOGIC called");
    }
  }
}());

Answer 4

您必须在 navbar-controller.js 中注入$ scope（请记住Dependency injection？），如下所示： -

(function () {
 'use strict';

 angular
  .module('navbar')
  .controller('NavbarCtrl','$scope', NavbarCtrl);

 function NavbarCtrl($scope) {
  var vm = this;
  vm.ctrlName = 'NavbarCtrl';

  this.loginHeader = function(){
    console.log("LOGIC called");
   }
  }
}());

$ scope在我的导航栏控制器中不起作用？

4 个答案: