JSON-Objects with AngularJS 和 Ionic 在 ng-controller 中的表达式

Question

我解析 JSON 个对象来创建 html 个元素。就我而言，我从 json 文件 Buttons:

创建

{
    "type": "button",
    "id": "comButton",
    "icon": "ion-chatboxes",
    "name": "Communication",
    "onclick": "",
    "controller": "somemthctrl",
    "ngclick": "launchSomemethod()",
    "color": "white",
    "backgroundcolor": "#ff5db1",
    "font-size": "20px"
}

控制器：

myApp.controller('generateButtonCtrl', function ($scope, $http) {
    $http.get('JSON/buttons.json').success(function(data){
        $scope.components = data;
    });
});

在 HTML 页面中，我调用了 json 文件中的组件：

<a ng-repeat="component in components"
   style="color:{{component.color}}; background-color:{{component.backgroundcolor}} "
   id="{{component.id}}"
   class="{{component.type}}"
   href="{{component.onclick}}"
   ng-click="{{component.ngclick}}"
   ng-controller="{{component.controller}}">

    <i class="{{component.icon}}"><br></i>
    {{component.name}}
</a>

在 ng-click="{{component.ngclick}}" 和 ng-controller="{{component.controller}}" 的情况下将不包括在内。

在适当的地方，我从我的编辑器 WebStorm 得到以下错误：标识符或字符串文字或数字文字预期。

我有一个 {{expression}} 问题。如何将 ng-controller 和 ng-click 集成为来自 json 对象的字符串？

Answer 1

我不确定 ng-controller 是否可能是 {{ expression }}。解决方法是创建一个函数，该函数 returns 您想要的控制器的名称，您可以将其分配给控制器内的 var...

在其他情况下，为什么要为每个按钮使用不同的控制器？

Answer 2

这很棘手。 Angular 团队在他们的文档中建议在解析 DOM 时将控制器注册到模块。

All the $scope properties will be available to the template at the point in the DOM where the Controller is registered.

Link: Angular controllers

使用$controllerProvider注册控制器这个link 阐明了稍后如何解决控制器的问题时间，这可能会帮助您根据需要设计代码。
ng-click 你可以在 $scope 树的控制器中给出一个表达式或方法。这两个表达式 and/or 函数搜索发生在 $scope 树中模板。

根据提琴手的要求更新

我已经更正了 fiddler 代码，删除了不需要的行和错误并使其正常工作。

现在您的模板在运行时动态绑定到 JavaScript 代码。

Fiddler Link

Javascript:

 var myApp = angular.module('starter', []);
myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'https://api.myjson.com/**'
    ]);
}]);

myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {
    $http.get('https://api.myjson.com/bins/1gkh0').success(function (data) {      
        for(var i in data){
            var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);            
            angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));            
        }               
    });
});

myApp.controller("OpenLinkCtrl", function ($scope) {    
        $scope.OpenLink = function () {
           alert("Link open");
        }    
});

Html:

 <body ng-app="starter" class="padding" style="text-align: center">
 <div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"></div>                                        
 <script type="text/ng-template" id="tpl">
                 <div class="col">
                    <a style="color:{{color}}; background-color:{{backgroundcolor}} "
                       id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"><i class="{{icon}}"><br></i>{{name}}</a>
                </div>
          </script>
    </body>

解释：

使用插值服务
使用编译器服务

注意：插值器无法解析对象数组。因此用于循环来插入每个对象数组并将其附加到 DOM.

可以找到有关编译器和插值的更多信息here

JSON-Objects with AngularJS 和 Ionic 在 ng-controller 中的表达式

Expression in ng-controller for a JSON-Objects with AngularJS and Ionic

json

angularjs

angularjs-controller

ionic-framework

ionic

根据提琴手的要求更新