angularjs – Angular – UI.Router不加载组件

发布时间：2020-12-17 17:58:43 所属栏目：安全来源：网络整理

导读：我无法让ui.router通过localhost或其他方式在index.html上加载组件：的index.html script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"/script script src="//unpkg.com/angular-ui-router@0.3.1/r

我无法让ui.router通过localhost或其他方式在index.html上加载组件：

的index.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="//unpkg.com/angular-ui-router@0.3.1/release/angular-ui-router.js"></script> <!-- used to route views -->
    <script src="js/components.js"></script>

    <body ng-app="myApp">
    <div> <!-- main content -->
         <ui-view></ui-view>   <!-- this directs ui-router to put the home view here-->
    </div>

components.js

var app = angular.module('myApp',['ui.router']); //makes a call to the Angular API to create our app,configured with the ui.router plug-in
    //configure our view router
    app.config(function($stateProvider) { 
      //create our different views as objects
      var mainState ={
        name: 'main',//name of the object
        url: '',//url to point to,or that causes this view to be triggered
        component: 'home',//component that works with the data,loads the template
        resolve: { //data to bind to our component
          data: function(Resource) {
            console.log(Resource.test()) //returns "Hello World"
            return Resource.test() 
          }
        }
      }
      //call the states
      $stateProvider.state(mainState); 
    })
    app.service('Resource',function ($http) {
      var service = {
       test: function() {
          return "Hello world"
        }
      }
      return service;
    })
    app.component('home',{
      bindings: { data: '<'},//make the data we loaded into the view from the factory available to this component
      template: "<p>{{data}}</p>",//this is the html that we will plug our data into
      controller: function () {
        console.log(this) //does not call
      }
    })

加载“Hello world”,以及当我使$http通过服务时的数据加载.但它没有传递给组件.有什么想法吗？

解决方法

组件属性可以从ui-router@1.0.0获得(参见 here和 CHANGELOG.MD – 它是在1.0.0-aplpha中添加的)因此它不可用0.3.1.

这是工作jsFiddle(1.0.3-beta)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!