javascript - 用动态数组填充 angularjs 作用域

标签 javascript angularjs ecmascript-5

我的 Angular 应用程序适用于

  <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>

但它不适用于

  <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>

更新:还是不行

 <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

最佳答案

替换 $scope.push(new myUrl($sce.trustAsResourceUrl(url)));$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>

关于javascript - 用动态数组填充 angularjs 作用域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48950100/

相关文章:

javascript - 修改 JavaScript 对象并使用 setRowsData 写入单个单元格

javascript - 为什么 Number.prototype 是一个数字

javascript - AngularJS 模块不起作用

javascript - Angular 可以从一个 json 文件中获取数据,但不能从一个单独的文件中获取数据?

javascript - V8 WasmModuleBuilder 从函数返回多个值

像对象构造函数一样的 JavaScript 服务 : how to provide a () method,?

javascript - 根据首字母过滤ng-repeat

javascript - 通过 js 使 angular1 表单变脏

javascript - 部分继承 - 在对象之间共享原始值

javascript - 是否使用 [array].filter 或 _.filter