データバインディングが動作しません。モジュール名がHTMLページに渡されません

Question

データバインディングが機能しません。 モジュール名が私のapplication.moduleに表示されません。nameはhtml page.moduleに渡されません。nameは、アプリケーション表示ではなくconsole.butで表示できます。 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のページ

(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); 
} 
}); 
}()); 

モジュール名は表示されません。

<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); 
} 
}); 
}()); 

そして、（あなたは "VM" としてあなたのコントローラを定義したとして）

Answer 1

はこれを試してみてくださいあなたの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}); 
     } 
    } 

ORあなたは（あなたのコードで行われたよう）コントローラエイリアシングを行っているとき、あなたはこの1

(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> 

を試してみて、コントローラdefinationのTOUにあなたのケースでモジュール名

(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); 
} 
}); 
}()); 

希望をバインドする

var vm=this; 

使用vmを、コントローラを参照するためにthisキーワードを使用することができます助けてください