AngularJS: почему я не могу внедрить html на мой взгляд?

Question

AngularJS: почему я не могу внедрить html на мой взгляд?

0

Я очень новичок в AngularJS, и я видел некоторые решения на SO, но из-за моей неопытности я не могу понять, как достичь своей задачи с этими решениями, поэтому я прошу о помощи, пожалуйста, несите меня, В принципе, по моему вопросу, мне нужно ввести и отобразить HTML-код на мой взгляд. Вот мой код:

HTML

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
   <div ng-repeat="tab in baseString" ng-bind-html-unsafe="tab">

    </div>

</tabset>

и моя часть КОНТРОЛЛЕРА:

function createBase() {
    for (var i = 0; i < $scope.news.news[0].posizioni.length; i++) {
        // $scope.tabsName[i] = $scope.news.news[0].posizioni[i][i];
    $scope.baseString[i] =["<tab heading='" + $scope.news.news[0].posizioni[i][i] + "' ng-controller='MainController'><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div id='paginaz"+ $scope.news.news[0].posizioni[i][i] +"'></div></tab>"];
    }
}

Мне нужно, чтобы tabsName оставался массивом.

За последние несколько часов я попробовал несколько решений, но до сих пор я не могу получить никаких результатов... пожалуйста, кто-нибудь может мне помочь? Заранее большое спасибо.

EDIT для лучшего понимания количества заголовков вкладки зависит от результатов json:

PORTION OF JSON:

    {
   "news":[
      {
         "posizioni":[
            {
               "0":"allNews"
            },
            {
               "1":"SecondTab"
            }
         ]
       }
]
}

FabioEnne 17 июль 2015, в 14:36

Источник

2

какую версию Angular вы используете? А что именно не работает?
Dan Pantry 17 июль 2015, в 12:29
0

Чтобы уточнить, в Angular 1.2 был удален ng-bind-html-unsafe . Теперь это просто ng-bind-html . Возможно, вам придется использовать $sce.trustAsHtml() в вашей html-строке, прежде чем передавать ее в ng-bind-html-unsafe .
Dan Pantry 17 июль 2015, в 12:33
0

@DanPantry v1.2.20
FabioEnne 17 июль 2015, в 12:33
0

@DanPantry, так что, если я использую v1.2.20, что мне делать?
FabioEnne 17 июль 2015, в 12:36
0

Используйте ng-bind-html .
Dan Pantry 17 июль 2015, в 12:36
0

@DanPantry, если я изменяю на ng-bind-html, это выдает мне эту ошибку: TypeError: html.match не является функцией
FabioEnne 17 июль 2015, в 12:39
3

Подожди, подожди, подожди! Вам не нужно вводить HTML в ваш HTML через ваш контроллер. Это действительно действительно не угловой способ сделать это. Не могли бы вы описать, что вы пытаетесь достичь с точки зрения функциональности? (не технически)
Okazari 17 июль 2015, в 12:47
0

@Okazari Мне нужно динамически создавать несколько вкладок в зависимости от того, сколько в объекте, который исходит от Json ... поэтому в моей строке у меня есть такой Html ..
FabioEnne 17 июль 2015, в 12:50
3

Хорошо, тогда вы должны использовать ng-repeat. Вам не нужно манипулировать любым HTML в контроллере. Существуют угловые директивы для манипулирования HTML и его динамического создания, я создам вам пример и опубликую его в качестве ответа.
Okazari 17 июль 2015, в 12:52
0

Не могли бы вы предоставить образец этого Json?
Okazari 17 июль 2015, в 12:53
0

@Okazari Я отредактировал свой вопрос с частью Json
FabioEnne 17 июль 2015, в 12:57
0

Кажется, вам нужно просто переместить этот HTML-код из контроллера в ваш HTML
Grundy 17 июль 2015, в 13:03
0

@Grundy Я не могу понять, что ты пытаешься мне сказать. Можете ли вы дать мне пример, основанный на моем коде, представленном здесь? Спасибо
FabioEnne 17 июль 2015, в 13:05
0

Это учит меня не читать весь вопрос
Dan Pantry 17 июль 2015, в 13:06
0

какую вкладку вы используете? angular-ui / tabs ?
Grundy 17 июль 2015, в 13:06
1

Вы получили руку на JSON? Потому что на самом деле JSON довольно странно. posizioni должен быть коллекцией объектов с нормализованными именами (например, posizioni = [{name: thename}, {name: thename2}] или просто должен быть коллекцией (например: posizioni = [thename, thename2]). На самом деле Коллекция объектов с динамическими свойствами (0,1,2) делает невозможным итерации.
Okazari 17 июль 2015, в 13:07
0

@Okazari, вы можете сделать это таким образом. Scope.news.news [0] .posizioni [i] [i]
FabioEnne 17 июль 2015, в 13:11

Показать ещё 15 комментариев

Теги:

javascript

angularjs

html5

2 ответа

Ещё вопросы

какую версию Angular вы используете? А что именно не работает?
Чтобы уточнить, в Angular 1.2 был удален ng-bind-html-unsafe . Теперь это просто ng-bind-html . Возможно, вам придется использовать $sce.trustAsHtml() в вашей html-строке, прежде чем передавать ее в ng-bind-html-unsafe .
@DanPantry, так что, если я использую v1.2.20, что мне делать?
@DanPantry, если я изменяю на ng-bind-html, это выдает мне эту ошибку: TypeError: html.match не является функцией
Подожди, подожди, подожди! Вам не нужно вводить HTML в ваш HTML через ваш контроллер. Это действительно действительно не угловой способ сделать это. Не могли бы вы описать, что вы пытаетесь достичь с точки зрения функциональности? (не технически)
@Okazari Мне нужно динамически создавать несколько вкладок в зависимости от того, сколько в объекте, который исходит от Json ... поэтому в моей строке у меня есть такой Html ..
Хорошо, тогда вы должны использовать ng-repeat. Вам не нужно манипулировать любым HTML в контроллере. Существуют угловые директивы для манипулирования HTML и его динамического создания, я создам вам пример и опубликую его в качестве ответа.
Не могли бы вы предоставить образец этого Json?
@Okazari Я отредактировал свой вопрос с частью Json
Кажется, вам нужно просто переместить этот HTML-код из контроллера в ваш HTML
@Grundy Я не могу понять, что ты пытаешься мне сказать. Можете ли вы дать мне пример, основанный на моем коде, представленном здесь? Спасибо
Это учит меня не читать весь вопрос
какую вкладку вы используете? angular-ui / tabs ?
Вы получили руку на JSON? Потому что на самом деле JSON довольно странно. posizioni должен быть коллекцией объектов с нормализованными именами (например, posizioni = [{name: thename}, {name: thename2}] или просто должен быть коллекцией (например: posizioni = [thename, thename2]). На самом деле Коллекция объектов с динамическими свойствами (0,1,2) делает невозможным итерации.
@Okazari, вы можете сделать это таким образом. Scope.news.news [0] .posizioni [i] [i]

berto · Answer 1 · 2015-07-17T10-57-00.000Z

1

В Angular HTML в вашем контроллере есть красный флаг; это неправильное место.

Вместо этого используйте ng-repeat, рядом с тем, что вы пробовали, для создания HTML, вот краткий пример.

В вашем контроллере просто сохраните данные:

$scope.data = {
    "news": [
        {"posizioni": [
            {"0": "allNews"},
            {"1": "SecondTab"},
        ]}
    ]
};

В HTML ваш ng-repeat может выглядеть так: из-за структуры JSON выше, он становится немного грязным, но он выполняет свою работу:

<tab ng-repeat="(key, name) in data['news'][0]['posizioni']" heading="{{ tab.key }}" ng-click="selectTab($event, key, name)">{{ name[key] }}</tab>

В скрипте я добавил обработчик щелчка, чтобы показать, как вы можете реагировать на клик, который произошел в TabController, для обновления данных в ContentController через службу. Обратите внимание: ContentService содержит массив данных, но вы можете обновить его, чтобы динамически запрашивать контент с восходящего сервера:

$scope.selectTab = function (event, key, name) {
    ContentService.setContent(key);
}

berto 17 июль 2015, в 10:57

0

В том-то и дело, но что касается его JSON, он на самом деле не может использовать ng-repeat с ним. Или, по крайней мере, не чистый. Просто попробуйте с его образцом и скажите мне, если вы найдете способ.
Okazari 17 июль 2015, в 13:08
0

@Okazari, посмотри, я думаю, что это работает.
berto 17 июль 2015, в 13:19
0

Отличная работа, но я не рекомендую использовать трансляцию $ даже больше на $ root. Для обмена данными между контроллерами вы должны предоставить пример с услугами. Несмотря на то, что трансляция $ работает, это не очень хорошая практика.
Okazari 17 июль 2015, в 13:29
0

@berto Спасибо, я постараюсь реализовать это! В любом случае, вы итальянец, если я оставлю вам свою электронную почту, было бы неуместно, чтобы вы быстро услышали нас по телефону?
FabioEnne 17 июль 2015, в 13:31
0

@FabioEnne Вот то же поведение с традиционным угловым способом сделать это: обмен данными с сервисом (TabService) jsfiddle.net/z1otuffj
Okazari 17 июль 2015, в 13:42
0

Можете ли вы объяснить, почему плохая практика - использовать $broadcast и почему сервис лучше? Скрипка обновлена, чтобы использовать сервис вместо. Обновление ответа сейчас.
berto 17 июль 2015, в 13:49
0

@berto У меня был спор об этом на другом посте stackoverflow.com/questions/30670104/… Вот мое окончательное объяснение: «Насколько я знаю, $ broadcast более технически используется в директивах. Его использование в контроллерах не является действительно необходимым. Я признаю, что если вы действительно отправляете события, вы можете использовать его, но на самом деле все события уже заключены в угловые директивы (ng-click, ng-enter и т. Д.), И если это просто вопрос обновления var из одного контроллер к другому, я бы определенно пошел с общей переменной службы ".
Okazari 17 июль 2015, в 14:36
0

@berto Я бы также сказал, что это вопрос ремонтопригодности. События $ broadcast могут захватывать множество мест в вашем коде, а $ broadcast действительно трудно понять, что происходит. Служба будет централизовать данные для многих вещей (контроллеры, другие службы, директивы и т. Д.) Только с помощью внедрения зависимостей. Что намного понятнее и приводит к меньшему количеству ошибок.
Okazari 17 июль 2015, в 14:39
0

@Okazari, спасибо за объяснения; Я согласен, что лучше использовать Сервис.
berto 17 июль 2015, в 14:41
0

@FabioEnne для чего?
berto 17 июль 2015, в 14:43
0

@berto должен был просто объяснить вам, что я должен был сделать для работы, и два более быстрых совета для работы, которую я должен был сделать, но если вы не понимаете, не проблема, просто было то, что я нахожусь в кривых, и я должен закончить проект в понедельник
FabioEnne 17 июль 2015, в 15:07

Показать ещё 9 комментариев

Grundy · Answer 2 · 2015-07-17T11-17-00.000Z

просто переместите html строку с вашего контроллера на ваш html, как

<tabset panel-tabs="true" panel-class="panel-grape" ng-controller="MainController" data-heading="OTHER NEWS">
    <tab  ng-repeat="tab in news.news[0]" heading='{{tab[$index]}}' ng-controller='MainController'>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx{{tab[$index]}}'></div>
        <div class='col-xs-12 col-sm-6 col-md-6' id='colonaSx{{tab[$index]}}'></div>
        <div id='paginaz{{tab[$index]}}'></div>
    </tab>
</tabset>