AngularJS 服务未被调用

Question

在此 fiddle 中，我试图通过将文本传递给服务来格式化文本，但未调用该服务：

http://jsfiddle.net/7MhLd/1038/

代码：

<div ng-controller="MyCtrl">
  <div ng-repeat="line in lines">
      <div class="preview">{{parseText(line.text)}}</div>
   </div>
</div>

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

myApp.factory('parseText', function(data) {
    return "textParsed"
});

function MyCtrl($scope) {
    $scope.lines = [{
        text: 'res1'},
    {
        text: 'res2'}];
}

我返回 textParsed 以显示未调用服务 - div 中未显示任何文本。如何调用此服务并传递参数 line.text ?

Answer 1

您在创建应用时犯了一些错误。

• 在主 div
上声明 ng-app="myApp"
• 在您的应用程序中注入工厂依赖项。
• return 来自工厂的对象可以有像 parse
这样的服务器方法
• 添加控制器时使用模块化方法，通过创建模块附加 angular 组件。

标记

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="line in lines">
        <div class="preview">{{parseText.parse(line.text)}}</div>
    </div>
</div>

代码

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

myApp.factory('parseText', function () {

    var parse = function(val){
        //you could have parsing logic here over your variable
        return val + " something";
    }
    return {
        parse: parse
    }
});

myApp.controller('MyCtrl', MyCtrl)

function MyCtrl($scope, parseText) {
    $scope.parseText = parseText;
    $scope.lines = [{
        text: 'res1'
    }, {
        text: 'res2'
    }];
};

Working Fiddle