1

我正在使用带有角度 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 中加载。我假设我错过了这里的应用程序流程或其他东西。

同样在谷歌浏览器的情况下，模式高度会根据“数字框”的大小而变化，但在 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(){.....

任何帮助表示赞赏。

4

1 回答 1

0

您应该在正文中使用 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',

})                    
        }
});

返回指令的正确结构

于 2016-06-25T10:33:54.360 回答