如何删除angular js中的未定义错误? [英] How to remove undefined error in angular js?

查看:25
本文介绍了如何删除angular js中的未定义错误?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何删除angular js中的未定义错误?实际上我正在尝试使用resolve加载数据并在控制器中使用该数据,但在控制器上我得到未定义为什么?

解析:{消息:功能(测试服务){返回 testservice.getdata();},消息2:功能(测试服务){返回 testservice.getTodo();},消息3:功能(测试服务){返回 testservice.getGithub();}}

使用控制器

.controller('b', function($scope, $stateParams, $state, $ionicHistory,message) {console.log("控制器已加载"+消息)})

//在控制台中未定义

console.log("控制器已加载"+message)

链接器http://plnkr.co/edit/siqCUS3jUKVQz6pxmC50?p=preview

解决方案

我想说,您就快到了.

只是服务/工厂必须返回一些东西.我的意思是:

<代码>...消息:功能(测试服务){返回 testservice.getdata();}

我们期待一些东西......但什么都没有

我添加了一行 return data; 并且有 那个更新的plunker

.factory('testservice', ['$http',功能测试服务($http){//界面//执行函数 getData() {return $http.get("http://jsonplaceholder.typicode.com/photos").then(函数(数据){控制台日志(数据)//这里 - 缺少这一行//这里返回一些东西返回数据;}, 函数(错误){控制台日志(错误)})

扩展:如何在解析完成之前显示一些视图...加载...?

根据一些评论,我扩展了此处的示例.现在显示此视图:

loadingB.html

<div ui-view=""><h2>...加载...</h2>

这是一个全新的父状态的视图'loadingB':

.state('loadingB', {重定向到:b",templateUrl : "loadingB.html",})

它在原始状态'b'的位置注入了上面的视图loadingB.html.并且它有一个属性redirectTo: "b",由这一段代码管理:

.run(['$rootScope', '$state', function($rootScope, $state) {$rootScope.$on('$stateChangeSuccess', function(evt, to, params) {如果(to.redirectTo){evt.preventDefault();$state.go(to.redirectTo, params)}});}])

我们的服务现在使用 $timeout 来获得一些延迟:

.factory('testservice', ['$http', '$timeout',功能测试服务($http,$超时){//界面//执行函数 getData() {return $http.get("http://jsonplaceholder.typicode.com/photos").then(函数(数据){console.log("解析http")返回 $timeout(function(){console.log("延迟两秒后")返回数据;}, 2500)...

最后,我们必须重定向到 loadingB 这里

$scope.moveto = function() {$state.go('loadingB');}

同时使 'laodingB' 的 'b' 孩子

.state("b", {父:加载B",templateUrl: "b.html",网址:/b",控制器:'b',解决: {消息:功能(测试服务){返回 testservice.getdata();},

查看所有内容此处

How to remove undefined error in angular js ?Actually i am trying to load data in using resolve and use that data in controller but on controller i am getting undefined why ?

resolve: {
    message: function (testservice) {
        return testservice.getdata();
    },
    message2: function (testservice) {
        return testservice.getTodo();
    },
    message3: function (testservice) {
        return testservice.getGithub();
    }
}

use the controller

.controller('b', function($scope, $stateParams, $state, $ionicHistory,message) {
    console.log("controller is loaded"+message)
})

// undefined in this console

console.log("controller is loaded"+message)

plinker http://plnkr.co/edit/siqCUS3jUKVQz6pxmC50?p=preview

解决方案

I would say, that you are almost there.

Just the service/factory must return something. I mean here:

...
message: function(testservice) {
      return testservice.getdata();
}

we expect something... and there was nothing

I added one line return data; and there is that updated plunker

.factory('testservice', ['$http',
  function testservice($http) {
    // interface

    // implementation
    function getData() {

      return $http.get("http://jsonplaceholder.typicode.com/photos")
        .then(function(data) {
          console.log(data)

          // HERE - this line was missing
          // return something here
          return data;

        }, function(error) {
          console.log(error)
        })

EXTEND: How to show some view ...loading... before resolve is done?

Based on some comments I extended the example here. It is now showing this view:

loadingB.html

<div >
  <div ui-view="">
    <h2>...loading...</h2>
  </div>
</div>

which is a view of a brand new parent state 'loadingB':

.state('loadingB', {
  redirectTo: "b",
  templateUrl : "loadingB.html",
})

It injects the above view loadingB.html in position of original state 'b'. And it has one property redirectTo: "b", which is managed by this small piece of code:

.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeSuccess', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}])

And our service now uses $timeout to get some delay:

.factory('testservice', ['$http', '$timeout',
  function testservice($http, $timeout) { 
    // interface

    // implementation
    function getData() { 

      return $http.get("http://jsonplaceholder.typicode.com/photos")
        .then(function(data) {
          console.log("resolved http")
          return $timeout(function(){
            console.log("after two seconds delay")
            return data;
          }, 2500)
        ...

And finally, we have to redirect to loadingB here

$scope.moveto = function() {
    $state.go('loadingB'); 
}

And also make the 'b' child of 'laodingB'

.state("b", {
  parent: "loadingB", 
  templateUrl: "b.html",
  url: "/b",
  controller: 'b', 
  resolve: { 
    message: function(testservice) {
      return testservice.getdata();
    },

Check it all here

这篇关于如何删除angular js中的未定义错误?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆