Squeak.ru - шаблоны программирования

Выражение в ng-контроллере для JSON-объектов с AngularJS и Ionic

Я разбираю объекты JSON для создания html-элементов. В моем случае я создаю из файла json кнопки:

{
    "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?

ionic-framework json angularjs angularjs-controller ionic
11.08.2015

Ответы:


1

Это довольно сложно. Команда Angular в своем документе предполагает, что контроллер должен быть зарегистрирован в модуле во время анализа DOM.

Все свойства $scope будут доступны для шаблона в той точке DOM, где зарегистрирован контроллер.

Ссылка: Контроллеры Angular

  • Используйте $controllerProvider для регистрации контроллера. rel="nofollow noreferrer">ссылка проливает свет на то, как контроллеры разрешаются в более поздний момент времени, что может помочь вам в проектировании вашего кода по желанию.
  • ng-click вы можете указать выражение или метод, который находится внутри контроллера дерева $scope. Поиск выражения и/или функции происходит внутри дерева $scope во время компиляции вашего шаблона.

Обновление в соответствии с запрошенным скрипачом

Я исправил код скрипача, удалил ненужные строки, ошибки и заставил его работать.

Теперь ваш шаблон динамически привязывается к коду JavaScript во время выполнения.

Ссылка Fiddler

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>

Пояснение:

  • Используемый сервис интерполяции
  • Используемый сервис компилятора

Примечание. Интерполятор не может анализировать массив объектов. Поэтому используется цикл for для интерполяции каждого массива объектов и добавления его в DOM.

Дополнительную информацию о компиляторе и интерполяции можно найти здесь

11.08.2015
  • Я получаю сообщение об ошибке: Ошибка: ng:areq Bad Argument Argument '{{component.controller}}' is not a function, got undefined 17.08.2015
  • создайте скрипку, чтобы разобраться в проблеме. 17.08.2015
  • Hier Пример JSFiddle: надеюсь, это поможет прояснить ситуацию. 17.08.2015
  • @Рамоста обновлен. Ваша скрипка содержала много ошибок и нежелательных кодов. Я почистил его для вас. Адаптируйте его для своего ионного кода. 17.08.2015
  • Большое спасибо за вашу помощь. Это работает хорошо. Но мой объект JSON всегда должен содержать пары controller и function. Так что controller и function не должны быть пустыми. В противном случае это не работает. Но бывают случаи, когда эти пары могут быть пустыми. Как я могу решить эту проблему? 18.08.2015
  • Я рад, что приведенный выше код помог вам. И да, чтобы скомпилировать шаблон, Angular ожидает, что его зависимости от шаблона будут присутствовать в директивах области действия и шаблонов. Я бы посоветовал вам просмотреть данные, полученные при успешном обратном вызове, и прикрепить к объекту фиктивные выражения, чтобы компиляция не была нарушена. 18.08.2015
  • Большое спасибо. Это было решением. И последнее: я думаю, что моя адаптивная сетка не работает должным образом из-за тега <script type="text/ng-template" id="tpl"></script>. Сетка не более отзывчива. Таким образом, он не настраивается автоматически для разных размеров экрана и не устанавливает разрыва строки для многих кнопок или компонентов. Либо они сливаются друг с другом, либо все кнопки находятся в столбце друг под другом. Как я могу это решить? 18.08.2015
  • Давайте продолжим это обсуждение в чате. 18.08.2015
  • со вчерашнего дня я пытаюсь оптимизировать отзывчивую систему Grid для своих кнопок из файла JSON. У меня пока не получилось. Я создал новый вопрос. Может быть, вы прочтете вопрос и поможете мне с моей проблемой? 19.08.2015
  • Парсинг из JSON прекрасно работает на Android. в браузере Google Chrome также. Но в IOS и Firefox возникают проблемы, и анализируемый компонент не отображается в браузерах IOS и Firefox. Я не знаю, является ли следующая ошибка причиной, потому что: Uncaught TypeError: Can not Read Property '1' of zero В противном случае я не получаю другое сообщение об ошибке. Можете ли вы сказать, что это может быть? 04.09.2015
  • Я получаю в Firefox следующую ошибку: Error: document.querySelector(...).innerText is undefined 04.09.2015

    • 2

    Я не уверен, что ng-controller может быть {{ expression }}. Обходной путь заключается в создании функции, которая возвращает имя нужного вам контроллера, и вы можете назначить его переменной внутри контроллера...

    В другом случае, почему вы хотите использовать разные контроллеры для каждой кнопки?

    11.08.2015
  • У меня много случаев, когда мне нужен другой контроллер для некоторых кнопок. 11.08.2015
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...