AngularJS ng-src


One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340345d299e900f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

AngularJS ng-src внутри iframe

у меня проблема с использованием ng-src внутри iframe. Мне нужно это сделать:

Я знаю, что проблема в $sce, которая является защитой от XSS, и что ссылка должна быть добавлена в белый список. Так что это работает, когда я делаю это.

и я определяю внутри контроллера:

но я не могу сделать это так, потому что я зацикливаюсь на ng-repeat, поэтому ссылка генерируется динамически. Он нужно быть читаемым из базы данных!

3 ответов


вместо этого можно использовать фильтр:

где «yourURL» — это URL-адрес iframe, а «trustAsResourceUrl» — это фильтр и определяется как в некотором модуле(например, например. фильтры-модуль) как:

и вы можете использовать этот фильтр во всех iframes и других встроенных элементах в вашем приложении. Этот фильтр позаботится обо всех URL-адресах, которым нужно доверять, просто добавив фильтр.

Ok Я нашел, в чем проблема.. Спасибо за то, что фильтр работает сейчас:)

все, что мне нужно было сделать, это создать ссылку ng-src:

может быть, это поможет кому-то! :)

как сказал Kop4lyf вам нужно добавить фильтр в js

Использование директив ngShow и ngHide в AngularJS

Сегодня мы посмотрим на то, как можно использовать директивы ngShow и ngHide в Angularjs.

Зачем они нужны

ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA , скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

Использование

Чтобы использовать ngShow или ngHide, нужно просто добавить директиву к элементу, который вы хотите показать или скрыть.


Когда разметка создана, необходимо установить значения переменных hello или goodbye . Сделать это можно, например, в контроллере Angular и соответствующий div будет показан или скрыт после загрузки приложения.

Использование с логическими значениями

Демо
Мы создадим ссылку, которая использует ngClick для установки переменной goCats в положение true или false .

Теперь можно показать или скрыть изображение кота с помощью ng-show .

Мы используем ng-src для изображений, которые используются в angular приложении, если изображение должно быть скрыто. Если не использовать эту директиву, изображение будет показано в момент загрузки приложения, а затем исчезнет, ​​как только angular поймет, что изображение должно быть скрыто.

Вычисляемые выражения

Демо
Здесь мы вычисляем строку, получаемую из нашего поля ввода. Мы связываем поле ввода с помощью ng-model с переменной aminal .В зависимости от введенного значения, если строка есть, будет показано изображение.

Илон Маск рекомендует:  Пpедположим надо создать новое окошко

А в директиве ng-show будем вычислять значение этой переменной

Использование с функцией

Демо
Здесь мы сделаем простую проверку, является ли введенное число четным или нечетным. Мы создадим функцию в нашем файле AngularJS:

Теперь, все что мы должны сделать, это вызвать функцию с помощью ng-show или ng-hide и передать ей числа.

В итоге

Как мы видим, с помощью этих двух простейших директив можно делать очень многое. Надеюсь, это поможет вам в создании ваших приложений. Чуть позже будет статья об использовании анимаций в связке с ngShow и ngHide.

ng-src in angularjs


what is ng-src

Ng-src directive is used to bind dynamic image/audio/video/iframe url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.

Example of ng-src

When we will execute this code, it will generate 404 error, as it will try to load p.image, which is not available. Image will be loaded but with 404 error which is not good practice.

Now replace src with ng-src and again execute the code

Понимание AngularJS ng-src

Как объяснено здесь , директива angularjs ng-src используется для предотвращения загрузки браузером ресурса (например, изображения) до того, как руль будет проанализирован. В настоящее время я использую следующий код:

Со следующим JS:

Путь извлекается из веб-службы. Из-за этой задержки браузер пытается загрузить http://localhost:8081/media/ , что вызывает 404. После получения пути браузер выдает правильный запрос и загружает изображение.

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

Пример, иллюстрирующий мою ситуацию, см. В разделе jsfiddle.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.


What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340348bbcbd4f36 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Вопрос по angularjs &#8211 Угловое делегирование события ng-click

Так что, если у меня есть уль с 100 лиs должны быть ng-клики в каждом li или есть способ привязать событие к ul и делегировать его в li ‘Что-то делает jquery? Будет ли это лучше или хуже? У нас есть 100 событий или это только одно событие в конце?

мой друг указал на это:plnkr.co/edit/uC49BsKmvvDvQNJ72r0v?p=preview можно добиться этого с помощью плоской угловой

ямы адаптированынекоторый код из Георга что позволяет мне поместить функцию handleMenu глубже в $ scope (например, $ scope.tomato.handleMenu).

лвопрос на GitHub об этом, Аргумент в том, что если это действительно приводит к улучшению производительности.

Возможно, есть обходной путь, но для этого потребуется jQuery. Он состоит из создания специальной директивы, которая будет использоваться в родительском элементе, и регистрации слушателя на его узле dom.

Вот’Например, передается имя функции, которая вызывается при щелчке дочернего узла, а также селектор, помогающий определить, какие дочерние узлы слушать. С угловыми роликамиРеализация JQuery дает только bind метод — который ограничивается регистрацией слушателей событий для фактического элемента — нам нужно загрузить jQuery, чтобы иметь доступ либо к on или же delegate метод.

Определенная функция определена в контроллере и ожидает передачи индекса

Директива использует $parse преобразовать выражение в функцию, которая будет вызываться из прослушивателя событий.


Примечание. Функции могут быть делегированы директивам с использованием отдельных областей. , который стоит посмотреть, но это увеличивает сложность.

@ Леонардо, у меня нетт к сожалению. Настоящий мир с угловым 2 I ‘Я даже не уверен, стоит ли изучать

Вы’Я также хочу слушать $destroy событие, чтобы удалить слушатель события из element , Иначе я верюs утечка памяти, когда элемент удаляется из DOM.

Привет большое спасибо JM- за ваш ответ. Мне всегда было любопытно также, будет ли это более перфорированным или нет. Собираюсь запустить js perfs, чтобы увидеть идентификатор, и я могу заметить разницу во времени. Это решение довольно круто!

Илон Маск рекомендует:  Атрибут enctype в HTML

Йо нужно использовать e.currentTarget вместо . e.target e.target это элемент под кликом. e.currentTarget это элемент, к которому прикреплено событие (даже делегированное событие). Например, если HTML text и селектор делегирования a затем e.target будет span элемент и e.currentTarget будет a элемент.

@climboid ты проводил эти тесты? Что вы можете сказать по этому поводу? Стоит или нет делать делегирование событий в угловых?

Отработка JM- ‘Например, я написал более краткую и гибкую версию этой директивы. Думал я’буду делиться Кредит идет в JM-;)

Моя версия пытается вызвать имя функции как $ scope [fn] (e, data) или изящно завершается неудачей.

Он передает необязательный объект json от элемента, по которому щелкнули. Это позволяет использовать угловые выражения и передавать многочисленные свойства вызываемому методу.

Буду рад услышать отзывы, если кто-то хочет внести свой вклад.

Я не’t проверить метод handleMenu, так как я извлек это из более сложного приложения.

Хорошо сделано. Смотрите мое улучшение, используя адаптацию Георгаответ «Разбор точечной нотации объекта для получения значения объекта «.

Понимание AngularJS ng-src

Как пояснялось в here, директива angularjs ng-src используется для предотвращения загрузки браузером ресурса (например, изображения) до того, как рули разбираются. В настоящее время я использую следующий код:


Со следующим JS:

Путь, извлекаемых из веб-сервиса. Из-за этой задержки браузер пытается загрузить http://localhost:8081/media/ , что вызывает 404. После того как путь будет восстановлен, браузер выдает правильный запрос и загружает изображение.

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

Для примера, иллюстрирующего мою ситуацию, см. jsfiddle.

Создан 14 авг. 13 2013-08-14 14:56:52 Martijn

angularjs: ng-src equivalent for background-image:url(. )

In angularjs you have the tag ng-src which has the purpose that you won’t receive an error for an invalid url before angularjs gets to evaluate the variables placed in between << and >> .

The problem is that I use quite some DIV’s with a background-image set to an url. I do this because of the excellent CSS3 property background-size which crops the image to the exact size of the DIV.

The only problem is that I receive a lot of errors for the exact same reason they created a ng-src tag: I have some variables in the url and the browser thinks the image doesn’t exist.

I realize that there is a possibility of writing a crude <<"style='background-image:url(myVariableUrl)'">> , but this seems ‘dirty’.

I’ve searched a lot and can’t find the right way to do this. My app is becoming a mess because of all of these errors.

  • css
  • angularjs


This one works for me

ngSrc is a native directive, so it seems you want a similar directive that modifies your div’s background-image style.

You could write your own directive that does exactly what you want. For example

Which you would invoke like this

The above answer doesn’t support observable interpolation (and cost me a lot of time trying to debug). The jsFiddle link in @BrandonTilley comment was the answer that worked for me, which I’ll re-post here for preservation:

It’s also possible to do something like this with ng-style :

which would not attempt to fetch a non-existing image.

Similar to hooblei’s answer, just with interpolation:

just a matter of taste but if you prefer accessing the variable or function directly like this:

instead of interpolating like this:

then you can define the directive a bit differently with scope.$watch which will do $parse on the attribute

Maybe I have a temporal advantage because the question is a year old, but fwiw this works for me:

Though phpstorm hates that syntax and gives me a red mark, so I may end up going with one of the other solutions here, I just thought it might help someone

Since you mentioned ng-src and it seems as though you want the page to finish rendering before loading your image, you may modify jaime’s answer to run the native directive after the browser finishes rendering.


This blog post explains this pretty well; essentially, you insert the $timeout wrapper for window.setTimeout before the callback function wherein you make those modifications to the CSS.

Илон Маск рекомендует:  Моделирование при сжатии текстовых данных модели для сжатия изображений

ж±‡ж™єзЅ‘ж˜ЇдёЂдёЄе­¦д№ жњЂе‰ЌжІїзј–зЁ‹жЉЂжњЇзљ„е№іеЏ°,дє’еЉЁејЏзљ„е­¦д№ е’Ње®ћж—¶ењЁзєїзљ„з»ѓд№ ,иѓЅи®©дЅ иї…йЂџиї›е…ҐзЉ¶жЂЃ,快速掌握知识技能。

Angular.js ng-src Example

Posted by: Thodoris Bais in Angular.js June 26th, 2015 3 Comments Views

Hi there! Today we ‘re gonna see how to include images in our Angular applications.

1. Introduction

In plain HTML, we use the tag to insert an image to our site. For example, this could be a sample image insertion:

Now, in terms of Angular.js and image insertion, one could easily claim, that we can similarly refer to an image, by using one of the standard Angular.js templates. I suppose, everyone would go for the “markup” one, with which, we can use the double curly brace notation << >> to bind expressions to elements.

However, using Angular markup like <> in the fore-mentioned form, within an HTML src attribute doesn’t work well, as the browser will fetch from the URL with the literal text <> , until Angular replaces the expression inside <> .

Angular’s ngSrc directive solves this problem.

The fore-mentioned “buggy” way to implement is, seems like:

But the correct way to write it, is by using the ngSrc directive:

2. Example’s concept

For our convenience, we ‘ll make use of an existing example concept, the one where I demonstrated the Angular.js JSON Fetching. That is, assuming that we have to display some countries’ data in our page, we may also want to let the user view the country’s flag, too. So, we ‘ll use the ngSrc directive in conjuction with a JSON file. This is not so close to the introduction section, but I ‘ll cover that usage, too.


3. The Example

My previously linked example, according to JSON fetching, describes in depth how to load and “consume” a json file, into an Angular.js application, so I’ll quickly get into this.

3.1 The JSON file

Here’s a minified version of our JSON file:

That is, it includes one additional key, compared to Angular.js JSON Fetching‘s one: the flagURL .

3.2 Fetching the JSON file

We can load a JSON file to an Angular app into the $scope variable, by calling the $http service. a core Angular service that facilitates communication with the remote HTTP servers via browser’s XMLHttpRequest or via JSONP .

Practically, this means that you have to deploy your app in a web server, rather than executing it in a browser. For further details about this fact, please consult this post.

To do so, we ‘ll reuse the following code snippet from the existing example (JSON fetching), assuming that:

  1. The Angular app is named as contryApp .
  2. Our controller is named as CountryCtrl .
  3. Our JSON file is named as countries.json and is placed in app’s root folder.

3.3 Displaying the JSON file

Keeping a similar concept as in the Angular.js JSON Fetching Example let’s see how to display the country’s flag, using the ngSrc directive:

Lines 1, 7-14 and 16, fulfill the assumptions made in JSON fetching section. Let’s use an HTML table to group the JSON’s data properly. Lines 21-23 define the table’s headers for the country name, population and flag.

That is, we want to divide each country’s data, into name, population and flag, in order to display each one in the corresponding table’s column. For this purpose, we ‘ll use the ngRepeat directive, which instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current location item, and $index is set to the item index or key.

When it comes to our case, in order to repeatedly loop over each country, we have to assume that each country is a table row:

So, now that the country processed each time can be accessed from the country variable, it’s easier to understand that lines 26-30 parse each country’s name, population and flag to the corresponding table column.

In addition to what is mentioned in the Introduction section of this example, the official documentation for the ngSrc , states that the directive can accept any argument of type template . That is, it accepts any string which can contain << >> markup.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL