DOM没有在angularjs中更新答案

【问题标题】：DOM not updating in angularjsDOM没有在angularjs中更新
【发布时间】：2016-06-25 18:33:54
【问题描述】：

我正在使用带有 Angular ui 路由器的 AngularJs。在我的主页上，我在 HTML 标记中声明了“ng-app”。

首页是这样的

<html  ng-app="grwebapp.sidebarlogin">
<head>
.
.
.
<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>

    <script>
    var userphone
//I assume digits-sdk is something loaded in the above script file. 
    document.getElementById('digits-sdk').onload = function() {

  Digits.init({ consumerKey: 'some-key' });
  Digits.embed({
//the container just tells where to place the digits box. 
//In this case I have provided it an 'id' of a div element.
  container: '#my-digits-container',
  });
}
</script>
</head>
<body>
....
 <div ui-view ng-controller="sidebarloginCtrl"></div>
</body>
</html>

grwebapp.sidebarlogin.js 的相关状态如下：

.state('/', {
        url:'/',
        templateUrl: '/angularapp/sidebarlogin.html',

        controller: 'sidebarloginCtrl',
});

最后是放在 ui-view div 中的 sidebarlogin.html

some code....
<div id="my-digits-container" ></div>
some code.....

上面的 div 被包裹在一个模态中。

我的问题是谷歌浏览器中加载了“数字框”。但是在 Mozilla Firefox 中，它有时会加载，有时则不会。我还发现，如果我将“ng-app”移动到“body”标签，那么“数字框”会在 Firefox 中加载，但现在我怀疑它是否总是会在 Firefox 中加载。我假设我错过了这里的应用程序流程或其他东西。

此外，在 google chrome 的情况下，模态高度会根据“数字框”的大小而变化，但在 Mozilla firefox 和 Internet Explorer 的情况下，“数字框”会出现一个垂直滚动条。

2016 年 6 月 25 日更新：

我尝试过使用指令在新的更新中，我在首页保留了digit-sdk

首页

<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async>

我的数字脚本现在在指令中：

app.directive("digitDir", function() {
    var userphone

    document.getElementById('digits-sdk').onload = function() {

  Digits.init({ consumerKey: 'some-key' });
Digits.embed({
  container: '#my-digits-container',
  theme: {
   /* Input fields borders */
  },
  phoneNumber: '+91',

})
};
return {

    };
});

模板 sidebarlogin.html 现在有这样的指令标签

<div id="my-digits-container" ></div>
<div digit-dir></div>

我还尝试将“digit-dir”div 放在“my-digit-container”div 的上方和内部。但是在firefox里面还是不行。

从我这次调试的结果来看，以下代码没有触发。

document.getElementById('digits-sdk').onload = function(){.....

感谢任何帮助。

【问题讨论】：

两件小事： 1) 如果您将控制器传递给状态，则无需在 ui-view 标签上声明 ng-controller 属性。 2）您在“数字”部分之后缺少和结束脚本标记。
在原始代码中，我有结束脚本标记。因为我在这里用较短的版本重写了这个，所以我忘记了。
这不会像您期望的那样工作，因为digits-sdk 和angular 彼此不了解。没有任何强制配置要求一个在另一个之前加载，并且digits-sdk 硬连线以查找my-digits-container，它在加载时可能会或可能不会被渲染。为了使它起作用，您必须将 digits-sdk 包装在 angular 指令中，以确保 angular 可以告诉它何时加载。

标签： javascript html angularjs dom twitter-digits

【解决方案1】：

你应该在 body 中使用 ng-app

<div ui-view ng-controller="sidebarloginCtrl"></div>

并从上述 div 中删除 ng-controller，因为您已经在您的州声明了这一点

根据角度，你的指令不是正确的方法

app.directive("digitDir", function() {


};
   return {
        restrict: 'E',
        template: '<span></span>',
        replace: true,
        link: function(scope, elm, attrs) {

                document.getElementById('digits-sdk').onload = function() {

  Digits.init({ consumerKey: 'some-key' });
Digits.embed({
  container: '#my-digits-container',
  theme: {
   /* Input fields borders */
  },
  phoneNumber: '+91',

})                    
        }
});

返回正确的指令结构

【讨论】：