时间戳

首页 > 解决方案 > JavaScript 小部件必须等待 AngularJS 变量值

javascript - JavaScript 小部件必须等待 AngularJS 变量值

问题描述

我对 AngularJS 平台上的外部小部件集成有一些问题：

<div id="some_widget" param="{{value}}"></div>
<script src="/widget.js"></script>

小部件在第一次执行param = "{{value}}"时将其视为字符串。使用超时可以解决问题，但并不优雅。像这样的使用ng-if：

<script ng-if="value" src="/widget.js"></script>

也不工作。有任何想法吗？

标签： javascriptangularjswidgetwait

解决方案

您可以在视图的控制器内使用手表（在注入 $scope 之后）来检查“值”何时不是未定义的（或为真，取决于具体情况）。检查后，您可以在文档中动态插入标记脚本并加载 widget.js。代码如下所示：

var app = angular.module('awesomeApp', []);
app.controller('awesomeController', function($scope){
    $scope.$watch('value',function(newValue, oldValue) {
        if(newValue != undefined) {
          // load script dynamically using any method
          var awesome_script = document.createElement('script');
          awesome_script.setAttribute('src','/widget.js');
          document.head.appendChild(awesome_script);
        }
    });
});
<html>
  <head>
    <!-- import the awesomeController.js file -->
  </head>
  <body ng-app="awesomeApp">
    <div  ng-controller="awesomeController">
      <div id="some_widget" param="{{value}}">
      </div>
    </div>
  </body>
</html>

希望能帮助到你。

推荐阅读