Search code examples
javascriptangularjsecmascript-5

Fill angularjs scope with a dynamic array


My Angular App works with

  <script>
    var app = angular.module('MyApp', []);
    app.controller('myCtrl', function ($scope, $sce) {

          $scope.urls = [
            {
              "url": $sce.trustAsResourceUrl("https://www.youtube.com/watch?v=KhzGSHNhnbI")
            },
            {
              "url": $sce.trustAsResourceUrl("https://www.youtube.com/watch?v=OPxeCiy0RdY")
            }
          ]

    });
  </script>

But it doesn't work with

  <script>
      urls = [
            {
              "url":"https://www.youtube.com/watch?v=KhzGSHNhnbI" 
            },
            {
              "url":"https://www.youtube.com/watch?v=OPxeCiy0RdY"          
            }
          ]
  </script>   

  <script>
    var app = angular.module('MyApp', []);
    app.controller('myCtrl', function ($scope, $sce) {

      function myUrl(url) {
          this.url = url;
      }

      $scope = [];
      urls.forEach(function (url, i) {

          $scope.push(new myUrl($sce.trustAsResourceUrl(url)));

      });

    });
  </script>

Update: still doesn't work

 <script>
    var app = angular.module('MyApp', []);
    app.controller('myCtrl', function ($scope, $sce) {

        function myUrl(url) {
            this.url = url;
        }

        $scope.urls = [];
        urls.forEach(function (url, i) {

            $scope.urls.push(new myUrl($sce.trustAsResourceUrl(url)));

        });

    });
  </script>

Error: [$sce:itype] http://errors.angularjs.org/1.4.3/$sce/itype?p0=resourceUrl


Solution

  • replace $scope.push(new myUrl($sce.trustAsResourceUrl(url))); with $scope.push(new myUrl($sce.trustAsResourceUrl(url.url)));

    https://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

     urls = [
                {
                  "url":"https://www.youtube.com/watch?v=KhzGSHNhnbI" 
                },
                {
                  "url":"https://www.youtube.com/watch?v=OPxeCiy0RdY"          
                }
              ]
    
    
    var app = angular.module('plunker', []);
        app.controller('MainCtrl', function ($scope, $sce) {
    
          function myUrl(url) {
              this.url = url;
          }
    
          $scope.urls = [];
          urls.forEach(function (url, i) {
    
              $scope.urls.push(new myUrl($sce.trustAsResourceUrl(url.url)));
    
          });
    
        });
    <!DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
        <script src="app.js"></script>
      </head>
    
      <body ng-controller="MainCtrl">
        <p ng-repeat="url in urls">Hello {{url.url}}!</p>
      </body>
    
    </html>