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

Question

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

也不工作。有什么想法吗？

Answer 1

您可以在视图的控制器内使用一个手表（在注入 $scope 之后）来检查 "value" 何时不是未定义的（或 true，取决于具体情况）。检查后，您可以在文档中动态插入标签脚本并加载 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>

希望对您有所帮助。

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

JavaScript widget must wait for AngularJS variable value

javascript

widget

wait

angularjs