我正在使用 AngularJs 和 Angular ui 路由器。 在我的主页上，我在 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',
});
最后还有 sidebarlogin.html ，它被放置在 ui-view div 中
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(){.....
感谢任何帮助。
最佳答案
你应该在 body 本身中使用 ng-app
<div ui-view ng-controller="sidebarloginCtrl"></div>
并从上面的 div 中删除 ng-controller 因为你已经在你的州声明了这一点
根据 Angular ，您的指令不是正确的方式
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',
})
}
});
返回指令的正确结构
关于javascript - AngularJS 中的 DOM 未更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38021646/