Как связать <script> атрибут src элемента в AngularJS

Я пытаюсь связать атрибут src элемента HTML <script> с переменной в моем угловом контроллере, чтобы я мог обновить его с контроллера, не имея дело с каким-либо интерфейсом.Как связать <script> атрибут src элемента в AngularJS

До сих пор я пытался все эти варианты:

<script type="text/javascript" ng-src="{{sourceUrl}}"></script> 
<script type="text/javascript" src="{{sourceUrl}}"></script> 
<script type="text/javascript" ng-src="sourceUrl"></script>

В моем контроллере у меня есть:

$scope.sourceUrl = "https://<some url goes here>";

При запуске страницы в браузере после $ scope.sourceUrl получает набор там не является исходящим запросом sourceUrl, поэтому я уверен, что делаю что-то неправильно. Есть идеи?

Я нашел несколько сообщений о src атрибута <img> элемента и ng-src должны работать, как они говорят, но я предполагаю, что <script> как-то по-другому.

источник

2014-12-05 Arsen Y.M.

Хотя теги сценария могут быть интерполированы только после того, как вы можете просто добавить еще теги скриптов.

<script ng-repeat="script in scripts" ng-src="{{script.src}}"></script>

В контроллере просто нажать несколько объектов, как {src: 'foo.js'} в массив скриптов и вуаля, ленивые нагруженные сценарии.

Вот Plunker, который демонстрирует это: http://plnkr.co/edit/6QuwuqsGoyrASk8FKmu2?p=preview

источник

2014-12-05 06:53:31 Enzey

Не работает. – erkpwejropi

Добавление мое решение как ответ на @ предложение Джонатана.

(function (ng) { 

    // Retrieve main app module 
    var appModule = angular.module('appModule'); 

    // This directive appends a child <script> element to an element with 'my-container' attribute. 
    // This is needed for 'src' attribute generation and script evaluation of some object after the 
    // page has been loaded. 
    appModule.directive('myContainer', ['$log', 'MvcModelService', function ($log, MvcModelService) { 
     return { 
      restrict: 'A', 
      scope: false, 
      link: function (scope, elem, attrs) { 
       var s = document.createElement("script"); 
       s.type = "text/javascript"; 

       var JSObjectName = "JSObject"; 

       // Just a random number ... 
       var randomNumber = Math.floor(Math.random() * Number.MAX_VALUE); 

       // flowId is a UUID representing current session. 
       var flowId = MvcModelService.FlowId; 

       // Construct the url where the object contents will be loaded from: 
       var Url = MvcModelService.UrlPrefix + "Get" + whatever + "/" + JSObjectName + 
          "someOtherStuffDepending on flowId and randomNumber"; 

       s.src = Url; 

       $log.info("Adding script element to MyContainer with source url: " + Url); 
       elem.append(s); 
      } 
     }; 
    }]); 
}(angular));

И вид фрагмент следующим образом:

<div id="JSObjectScript" style="display: inline" my-container />

источник

2016-01-28 11:00:09

Вы могли бы добавить его динамически к концу тела внутри контроллера:

 $("<script>").attr({src: $scope.sourceUrl}).appendTo("body");

источник

2016-05-31 20:59:28

Не Угловой способ, хотя –

Я знаю, что ответ приходит поздно но вот изящное и простое решение:

Вы должны использовать контекстное экранирование сценария с $ sce.trustAsResourceUrl (значение).

См Documentation

Было бы, вероятно, выглядеть следующим образом:

В app.js:

//Dynamic Url for Tagging 
    $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

В индексе.HTML:

<script type="text/javascript" src="{{exUrl1}}"></script>

Атрибут тега сценария src будет переплетен к его значению в Угловом. Вот результат, когда я бегу мой веб-приложение и запустить отладчик, чтобы проверить обработанную HTML:

<script type="text/javascript" src="http://exampleUrl.js"></script>

Обратите внимание, что сценарий не будет выполняться, если привязка выполняется после первой загрузки тега!

источник

2017-01-26 10:26:48

Ваше решение не сработало для меня, пока я не использовал 'ng-src' вместо' src'. После этого настройка доверенного URL-адреса в ApplicationController сделала трюк. – mareckmareck

Смежные вопросы