javascript - $rootScope 未在简单的 AngularJs 路由示例中呈现

标签 javascript angularjs rootscope

我试图通过 $scope 和 $rootScope 访问姓名和年龄,但即使我觉得我做的一切正确,也会出现错误。有人可以帮我看看错误在哪里吗?

<html>

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <a href="#/one">One</a><a href="#/two">Two</a>

    <ng-view></ng-view>

    <script> 
    //app declaration
    var app = angular.module("myApp",['ngRoute']);

    //routing
    app.config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/one',{templateUrl:'one.html'})
        .when('/two',{templateUrl:'two.html'})
        .otherwise({templateUrl:'one.html'});
    }]);

    //config 
    app.run(['rootScope', function($rootScope){
        $rootScope.age = 25;
    }]);

    //controller
    app.controller('myCtrl',function($scope, $rootScope){
        $scope.name = "Peter";
    });
    </script> 

</body> 

</html> 

one.html

ONE => {{name}},{{age}}

two.html

TWO => {{name}},{{age}}

更新错误:

enter image description here

最佳答案

您可以在 docs 中看到,第一个参数应该是一个函数

run(function(injectables) { // instance-injector
  // This is an example of a run block.
  // You can have as many of these as you want.
  // You can only inject instances (not Providers)
  // into run blocks
});

但是在你的代码中

app.run('rootScope',function($rootScope,$state){

第一个参数是字符串而不是函数。

所以,只需删除它,或者如果您想在数组中使用可注入(inject)语法包装

app.run(['$rootScope','$state',function($rootScope,$state){...}]}

但似乎您还有另一个错误:使用 $state 提供程序,但此提供程序不是 ngRoute 模块的一部分,而是 ui-router< 的一部分/em>.不管怎样,当运行 block 执行时,当前的路线可以不被定义。

没有多余的工作样本

//app declaration
var app = angular.module("myApp", ['ngRoute']);

//routing
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/one', {
      template: '<div>one: {{name}} | {{age}}</div>'
    })
    .when('/two', {
      template: 'two: {{name}} | {{age}}'
    })
    .otherwise({
      redirectTo: '/one'
    });
}]);

//config 
app.run(function($rootScope) {
  $rootScope.age = 25;
});

//controller
app.controller('myCtrl', function($scope, $rootScope) {
  $scope.name = "Peter";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <ng-view></ng-view>
</div>

关于javascript - $rootScope 未在简单的 AngularJs 路由示例中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42898795/

相关文章:

node.js - 在 Protractor 测试期间使用 $rootScope

javascript - 更改 HighCharts 轴标题

javascript - 如何将函数的 "this"绑定(bind)到类(React 组件)

css - 编辑复式输入字段时更新 ng-invalid

javascript - 在 angularjs Controller 内获取表单验证状态

javascript - AngularJS 工厂 $rootScope.$on 清理

angularjs - 在angularjs中检测页面卸载

javascript - 我想在另一个 div 中做一个特定的鼠标悬停效果

javascript - 将动态 html 表从一个页面发送到另一个页面

angularjs - ngTagsInput - 只允许选择自动完成建议?