Question

数据绑定无效。模块名称没有显示给我的应用程序。模块名称没有传递到html页面。模块名称可以在控制台中查看。但不能在应用程序显示中查看。 HTML代码

<ion-view  ng-controller="coursedetailctrl as vm">
    <ion-content class="has-header">
 <ion-list>
        <div class="card">
            <ion-item>
                  {{modulename}}

            </ion-item> 
        </div>  
</ion-list>
<ion-infinite-scroll
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

    </ion-content>
</ion-view>

js page

 (function(){

var aapp = angular.module('leadGen');


aapp.controller('coursedetailctrl', function($state, $scope, ContentService, $stateParams ){   
     var dat;
var vm=this;
 ContentService.getCourses($stateParams.cid).then(function(data) {

                        var myparam= $stateParams.cid;
                          dat=data;

                            $scope.coursedetail=dat;      
                    }, this);
$scope.selectModule= function(id){

   for(var j=0;j<dat.Modules.length;j++)
   {
     if(id==dat.Modules[j].id){
console.log(dat.Modules[j].name);
$scope.modulename=dat.Modules[j].name;
$state.go('module', {mid: id});

     }
   }
 console.log(id); 
}
});
}());

不显示模块名称。

Answer 1

尝试此操作（因为您已将控制器定义为“vm”）：

<ion-view  ng-controller="coursedetailctrl as vm">
    <ion-content class="has-header">
 <ion-list>
        <div class="card">
            <ion-item>
                  **{{vm.modulename}}**

            </ion-item> 
        </div>  
</ion-list>
<ion-infinite-scroll
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

    </ion-content>
</ion-view>

你的js（不需要使用“$ scope.module”）：

(function(){

var aapp = angular.module('leadGen');


aapp.controller('coursedetailctrl', function($state, $scope, ContentService, $stateParams ){   
     var dat;
var vm=this;
 ContentService.getCourses($stateParams.cid).then(function(data) {

                        var myparam= $stateParams.cid;
                          dat=data;

                            vm.coursedetail=dat;      
                    }, this);
vm.selectModule= function(id){

   for(var j=0;j<dat.Modules.length;j++)
   {
     if(id==dat.Modules[j].id){
console.log(dat.Modules[j].name);
**vm.modulename=dat.Modules[j].name;**
$state.go('module', {mid: id});

     }
   }
 console.log(id); 
}
});
}());

你的ng-repeat和函数调用：

<ion-list> <div class="card"> <ion-item ng-repeat="module in vm.coursedetail.Modules" ng-click="vm.selectModule(module.id)"> {{vm.module.name}} <div> {{vm.module.description}} </div> </ion-item> </div> </ion-list>

Answer 2

这看起来像关闭问题。如果您使用的是ECMA6，请以这种方式写入循环。

for(let j=0;j<dat.Modules.length;j++)
   {
      if(id==dat.Modules[j].id){
        console.log(dat.Modules[j].name);
        $scope.modulename=dat.Modules[j].name;
        $state.go('module', {mid: id});
      }
   }

或者你可以像这样使用

(function(index){
   $scope.modulename=dat.Modules[index].name;
})(j)

Answer 3

当您进行控制器别名时（正如您在代码中所做的那样）。您必须在视图中使用带有模型的别名。要运行您的代码，请尝试此

<ion-view  ng-controller="coursedetailctrl as vm">
    <ion-content class="has-header">
 <ion-list>
        <div class="card">
            <ion-item>
                  {{vm.modulename}}

            </ion-item> 
        </div>  
</ion-list>
<ion-infinite-scroll
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

    </ion-content>
</ion-view>

并且在控制器定义tou中可以使用this关键字来引用您案例中的控制器

 var vm=this;

使用vm绑定modulename

(function(){

var aapp = angular.module('leadGen');


aapp.controller('coursedetailctrl', function($state, $scope, ContentService, $stateParams ){   
     var dat;
var vm=this;
 ContentService.getCourses($stateParams.cid).then(function(data) {

                        var myparam= $stateParams.cid;
                          dat=data;

                            $scope.coursedetail=dat;      
                    }, this);
$scope.selectModule= function(id){

   for(var j=0;j<dat.Modules.length;j++)
   {
     if(id==dat.Modules[j].id){
console.log(dat.Modules[j].name);
vm.modulename=dat.Modules[j].name;
$state.go('module', {mid: id});

     }
   }
 console.log(id); 
}
});
}());

希望有所帮助

数据绑定不起作用。模块名称未传递到html页面

3 个答案: