角度 - 工厂错误'服务未定义'

时间:2015-12-03 23:04:52

标签: angularjs

进入Angular。我试图建立一个工厂来存储动画功能。我唯一得到的是服务没有定义'在控制台中。这是一个代码链接:http://codepen.io/tplummerptc/pen/dGbKOp

var app = angular.module('App', []);

app.factory('soarimation', function(){
  service.soarFlash = function(target, color) {
    target = (target == undefined) ? false : target;
    color = (color != 'default') ? 'defualt' : color;

    // Set animation color
    if(color != 'default') {
      var aniClass = 'flash-'+color;
    } else {
      var aniClass = 'flash';
    }
    if(!target) {
      $(this)
        .closest(target)
        .addClass(aniClass)
        .delay(1000)
        .queue(function(next){
        $(this).removeClass(aniClass);
        next();
      });
    } else {
      $(this)
        .addClass(aniClass)
        .delay(1000)
        .queue(function(next){
        $(this).removeClass(aniClass);
        next();
      });
    }
  }
});
app.controller('addRow',function($scope, soarimation){
  $scope.submitRow = function(event){
    angular.element(event.currentTarget).soarFlash('li');
  }
});

1 个答案:

答案 0 :(得分:1)

angularjs中的工厂总是返回一个对象。您必须在app.factory方法中声明服务对象,然后向其中添加所需的函数和变量。最后返回那个对象。您可以使用工厂名称在控制器中使用此对象。

app.factory('soarimation', function(){

  var service = {}; //Declaring the object
  service.soarFlash = function(target, color) {
    target = (target == undefined) ? false : target;
    color = (color != 'default') ? 'defualt' : color;

    // Set animation color
    if(color != 'default') {
      var aniClass = 'flash-'+color;
    } else {
      var aniClass = 'flash';
    }
    if(!target) {
      $(this)
        .closest(target)
        .addClass(aniClass)
        .delay(1000)
        .queue(function(next){
        $(this).removeClass(aniClass);
        next();
      });
    } else {
      $(this)
        .addClass(aniClass)
        .delay(1000)
        .queue(function(next){
        $(this).removeClass(aniClass);
        next();
      });
    }
  }

  return service;  // Return the object
});

app.controller('addRow',function($scope, soarimation){
  $scope.submitRow = function(event){
    var elem = angular.element(event.currentTarget);
    soarimation.soarFlash(elem);
  }
});