从离子模板调用控制器中的javascript函数答案

【问题标题】：calling javascript function in controller from ionic template从离子模板调用控制器中的javascript函数
【发布时间】：2016-02-21 13:24:12
【问题描述】：

创建我的第一个 Ionic 应用程序，到目前为止进展顺利。我不是 UI 专家，所以我确定我没有使用最好的风格做事，但无论如何......

我有一个包含此代码的模板。（我已经取出了额外的东西，并试图将其简化为问题的症结所在，因此请忽略任何语法错误。）

<ion-content class="padding">
    <div ng-repeat="entry in entries"> 
        <div class="list card item-remove-animate">
            <a class="item item-divider">{{entry.name}}</a>
            <a class="item item-body">
                <b>Type:</b> {{entry.typeCode}}
            </a>  
        </div>
    </div>
</ion-content>

当前正在显示的entry.typeCode是每个条目中存储的内容，但我确实想显示代码所引用的类型字符串。我的控制器中有一个函数，它执行从 typeCode 到 typeString 的映射，但我不知道如何调用它。

var typeCodeMappings = { 
    "B" : "Bike", 
    "A" : "Auto", 
    "T" : "Train", 
    "P" : "Plane" 
};

app.controller('EntriesCtrl', function($scope, $http) {

    $scope.typeCodeToString = function(code) {
        return typeCodeMappings[code];
    }

    $http.get("...queryUrl...").then(
        function(response) {
            $scope.entries = response.data.results;
        },
        function(reason) {
            console.log("Failed reading entries, reason=" + reason);
        }
    );
    }

查看了整个 Ionic 用户指南，我要么错过了它，要么只是做错了并且错过了范例。我知道我可以在 ng-Click="myFunction()" 等指令中调用绑定到 $scope 的 JS 函数，但是在显示某些内容时我该怎么做呢？我只想从模板中调用 typeCodeToString(entry.typeCode)。

请注意，我不仅需要调用控制器中的函数，还需要为模板中正在迭代的“条目”传递 typeCode。

【问题讨论】：

需要显示相关的控制器代码和数据示例，以便我们知道您在谈论typeString
你能把你的控制器也贴出来，这样更容易理解你在说什么。
添加了相关控制器代码

标签： javascript angularjs ionic-framework

【解决方案1】：

我不知道您的 typeCodeMappings 究竟是如何返回字符串的。但是，在控制器本身内定义一个函数可以实现您的要求。因为，您不想从 DOM 调用函数，而是在控制器中调用函数。

 app.controller('EntriesCtrl', function($scope, $http) {

       function typeCodeMappings(code){
             var string;
               if(code == "B"){
                  string = "Bike";
                  return string;
                }
              if(code == "A"){
                  string = "Auto";
                  return string;
                }
              if(code == "T"){
                  string = "Train";
                  return string;
                }
               if(code == "P"){
                  string = "Plane";
                  return string;
                }
      }

        $http.get("...queryUrl...").then(
            function(response) {
                $scope.entries = response.data.results;
//i dont know your entries structure but loop the conversion
 angular.forEach($scope.entries, function(value, key) {
               value.typeCode = typeCodeMappings(value.typeCode);});
            },
            function(reason) {
                console.log("Failed reading entries, reason=" + reason);
            }
        );
        }

【讨论】：

精氨酸。我发现了我的问题。我的离子实例正在缓存控制器而不是更新它，所以它似乎不起作用。当我杀死浏览器并再次尝试时，它只需调用 {{ }} 中的函数并嵌入其中的 arg 即可，例如类型： {{typeCodeToString(entry.typeCode)}}.
好吧，对你有好处 :) 也许，你应该澄清一下。我以为你想在控制器本身中调用你的函数:)

【解决方案2】：

您可以在 $scope 上指定您的 typecodeMappings，如下所示。

 $scope.typeCodeMappings = { 
"B" : "Bike", 
"A" : "Auto", 
"T" : "Train", 
"P" : "Plane"

};

在 html 视图中，

{{entry.typeCode}} - {{typeCodeMappings[entry.typeCode]}}

希望这会有所帮助。

【讨论】：