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

时间：2021-06-07 17:27:13

My Angular app is developed using a boilerplate of this yeoman generator.

我的Angular应用程序是使用这个yeoman发生器的样板开发的。

Routing and all things working fine but I could not get to working $scope only on navbar-controller.js and footer-controller.js. Please tell me if you need more information to give a clue about this.

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

Index.html

<!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>

navbar-controller.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");
    }
  }
}());

navbar-module.js

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

navbar-routes.js

(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'
      });
  }
}());

navbar-trl.html

....
.....
<li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li ng-hide="navbar.isLoggedIn"><a ui-sref="login">Login {{navbar.ctrlName}}</a></li>
        <li ng-hide="navbar.isLoggedIn" ><a ui-sref="register">Signup</a></li>
        <li ng-show="navbar.isLoggedIn"><a>Logged as {{navbar.username}}</a></li>
        <li ng-show="navbar.isLoggedIn"><a ui-sref="login">Logout</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
....
.....

Update: I found the answer. Thank you everyone. I would like to know that in other controllers I'm not injecting $scope since I'm using controller as syntax and also it is working perfect. Can anyone please explain the reason behind this, why only in navbar I need to inject $scope?

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

4 个解决方案

#1

3  

You have to init and inject $scope like so:

你必须初始化并注入$ scope,如下所示:

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

OR: (just extract controller's main function)

或者:(只提取控制器的主要功能)

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

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

})();

@UPDATE:

You probably mean controllers of directives? In this case $scopes are initialized and injected automatically, you just have to remember to add $scope as an argument to your controller's function. That's all.

你可能意味着指令的控制者?在这种情况下,$ scopes被初始化并自动注入,你只需要记住将$ scope作为参数添加到控制器的函数中。就这样。

#2

1  

You have to inject $scope as a service in your controller like this:

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

navbar-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");
    }
  }
}());

An even better practice is to pass services in a array, so by doing that you get more safe in cases like minification since the names won't be overriden.

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

navbar-controller-array-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");
    }
  }
}());

Make sure you're injecting the services in the same order they're in the controller.

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

Hope it helps.

希望能帮助到你。

#3

0  

inject $scope in your navbar-controller.js

在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");
    }
  }
}());

#4

0  

You will have to inject $scope in your navbar-controller.js ( remember Dependency injection ? ) like this :-

您将不得不在navbar-controller.js中注入$ scope(记住依赖注入?),如下所示: - 

(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");
   }
  }
}());

#1

3  

You have to init and inject $scope like so:

你必须初始化并注入$ scope,如下所示:

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

OR: (just extract controller's main function)

或者:(只提取控制器的主要功能)

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

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

})();

@UPDATE:

You probably mean controllers of directives? In this case $scopes are initialized and injected automatically, you just have to remember to add $scope as an argument to your controller's function. That's all.

你可能意味着指令的控制者?在这种情况下,$ scopes被初始化并自动注入,你只需要记住将$ scope作为参数添加到控制器的函数中。就这样。

#2

1  

You have to inject $scope as a service in your controller like this:

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

navbar-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");
    }
  }
}());

An even better practice is to pass services in a array, so by doing that you get more safe in cases like minification since the names won't be overriden.

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

navbar-controller-array-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");
    }
  }
}());

Make sure you're injecting the services in the same order they're in the controller.

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

Hope it helps.

希望能帮助到你。

#3

0  

inject $scope in your navbar-controller.js

在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");
    }
  }
}());

#4

0  

You will have to inject $scope in your navbar-controller.js ( remember Dependency injection ? ) like this :-

您将不得不在navbar-controller.js中注入$ scope(记住依赖注入?),如下所示: - 

(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");
   }
  }
}());
标签：

相关文章