Question

我刚刚开始使用Angularjs，我正在尝试获取选择列表中显示的信用卡类型列表。

我收到此错误（遗憾的是stackoverflow不允许我链接到它）：

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.16/$rootScope/infdig?   p0=10&p1=%5B%5B%22addC…22%3A%5C%22SOLO%5C%22%2C%5C%22value%5C%22%3A%5C%22SOL%5C%22%7D%5D%22%5D%5D
at Error (native)
at http://bht.local/Content/app.min.js:11162:450
at h.$digest (http://bht.local/Content/app.min.js:11263:164)
at h.$apply (http://bht.local/Content/app.min.js:11265:287)
at http://bht.local/Content/app.min.js:11174:23
at Object.d [as invoke] (http://bht.local/Content/app.min.js:11190:265)
at $b.c (http://bht.local/Content/app.min.js:11173:439)
at $b (http://bht.local/Content/app.min.js:11174:140)
at Wc (http://bht.local/Content/app.min.js:11173:215)
at HTMLDocument.<anonymous> (http://bht.local/Content/app.min.js:11365:360) 

app.min.js:11245(anonymous function) app.min.js:11245(anonymous function)     
app.min.js:11222h.$apply app.min.js:11265(anonymous function) app.min.js:11174d 
app.min.js:11190$b.c app.min.js:11173$b app.min.js:11174Wc app.min.js:11173(anonymous function) 
app.min.js:11365fire app.min.js:4414self.fireWith app.min.js:4526jQuery.extend.ready 
app.min.js:1799completed app.min.js:1470

Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.16/$rootScope/infdig?p0=10&p1=%5B%5B%22addC…22%3A%5C%22SOLO%5C%22%2C%5C%22value%5C%22%3A%5C%22SOL%5C%22%7D%5D%22%5D%5D

我做错了什么？看来这段代码正在创建一个无限循环。我已经尝试了一些注释掉代码的东西。

对此的任何帮助/建议都将深表感谢。

我将它绑定到这个html：

<div bht-add-credit-card-charge></div>

这是我的角度指令：

.directive('bhtAddCreditCardCharge', function(){
return{
    restrict:'EA',
    scope:true,
    link:function(scope,elem,attrs){

        scope.addCreditCardCharge=function addCreditCardCharge()
        {
            console.log('in addCreditCardCharge')
            scope.creditCards = [
                { name: 'VISA DEBIT/DELTA', value: 'DEL' },
                { name: 'VISA CREDIT', value: 'VIS' },
                { name: 'MASTERCARD CREDIT', value: 'MSC' },
                { name: 'MASTERCARD DEBIT', value: 'MCD' },
                { name: 'MAESTRO', value: 'MAE' },
                { name: 'SWITCH', value: 'SWI' },
                { name: 'VISA ELECTRON', value: 'ELC' },
                { name: 'SOLO', value: 'SOL' }
            ];
            scope.myCreditCard = scope.creditCards[0]; // red

            //return '<select ng-model="myCreditCard" ng-options="creditCard.name for creditCard in creditCards"></select><br>';
            return  scope.creditCards;

        }

    },
    //template: '<select data-ng-bind="addCreditCardCharge()" ng-model="myCreditCard" ng-options="creditCard.name for creditCard in creditCards"></select><br>'
    template: '<span class="creditCards" data-ng-bind="addCreditCardCharge()"></span>'
   }
})

Answer 1

这样的事情似乎有效。

 <bht-add-credit-card-charge></bht-add-credit-card-charge>

 .directive('bhtAddCreditCardCharge', function(){
return{
  restrict:'E',
  replace:true,
  link:function(scope,elem,attrs){

   scope.creditCards = [
            { name: 'VISA DEBIT/DELTA', value: 'DEL' },
            { name: 'VISA CREDIT', value: 'VIS' },
            { name: 'MASTERCARD CREDIT', value: 'MSC' },
            { name: 'MASTERCARD DEBIT', value: 'MCD' },
            { name: 'MAESTRO', value: 'MAE' },
            { name: 'SWITCH', value: 'SWI' },
            { name: 'VISA ELECTRON', value: 'ELC' },
            { name: 'SOLO', value: 'SOL' }
        ];

    scope.addCreditCardCharge=function addCreditCardCharge()
    {
        console.log('in addCreditCardCharge')

        scope.myCreditCard = scope.creditCards[0]; // red

        //return '<select ng-model="myCreditCard" ng-options="creditCard.name for
             creditCard in creditCards"></select><br>';
           return  scope.creditCards;

    }

   },
    template: '<div><select  ng-model="myCreditCard" ng-options="creditCard.name for    
                      creditCard in creditCards"></select><br></div>'
   }  
});

我做的主要事情。模板需要有一个根元素。你有两个。我只是把选择放在DIV里面来说明。更改范围：true替换：true并将其设为元素＆＃39; E＆＃39;而不是AE。您还可以看到其他一些更改。

使用指令显示和填充选择列表

1 个答案: