コントローラー変数を更新し、view（from 1.5）のビューで使用します。

コントローラー変数を子ディレクティブから更新したいとします。コントローラー変数を更新しましたが、この値はビュー内で変更されません。私は$ scopeを使用する必要があります。$ apply（）？ $ダイジェスト？コントローラー変数を更新し、view（from 1.5）のビューで使用します。

これはhttp://plnkr.co/edit/zTKzofwjPfg9eXmgmi8s?p=preview

jsのは、あなたが私のコードをきれいにするために他の提案を持っている場合、

UPDATEそれをしてください共有

var app = angular.module('app', []); 

app.controller('parentController', function($scope) { 
    this.myVar = 'Hello from parent'; 

    this.refreshMyVar = function(data) { 
     this.myVar = data.name; 
     console.log('>> this.myVar', this.myVar); 
    }; 
}); 

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<input type="file" />', 
     bindToController: { 
      attrFromParent: '=' 
     }, 
     controller: 'directiveController as directiveCtrl', 
     link: function(scope, el, attr, ctrl) { 
      el.bind('change', function(e) { 
       ctrl.onChange(e.target.files[0]); 
      }); 
     } 
    }; 
}); 

app.controller('directiveController', function() { 
    this.onChange = function(file) { 
     this.attrFromParent(file); 
    }; 
});

htmlファイル

<!DOCTYPE html> 
<html lang="en-US"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
<script src="app.js"></script> 
<body> 

<div ng-app="app" ng-controller="parentController as parentCtrl"> 
    <h1> >> {{parentCtrl.myVar}}</h1> 
    <p><my-directive attr-from-parent="parentCtrl.refreshMyVar" /></p> 
</div> 

</body> 
</html>

を提出私のコードです

app.controller('parentController', function($scope) { 
    this.myVar = 'Hello from parent'; 

    this.refreshMyVar = data => { 
     this.myVar = data.name; 
     console.log('>> this.myVar', this); 
     $scope.$parent.$apply(); // solve my problem 
    }; 
});

$ scope。$ parent。$ apply（）;誰かが他の命題を持っている場合、私は非常に満足していません

出典

2016-10-01 JFouad

まず、my-directive要素の構文を誤って記述しました。自己閉鎖要素であってはなりません。 –

まず、あなたのmy-directive要素構文が間違っています。これは、有効なHTMLではない自己閉じの要素であってはなりません。

構文このarticleもあなたを助けるかもしれないplunker

作業

<my-directive attr-from-parent="parentCtrl.refreshMyVar"></my-directive>

第二に、重要な

app.controller('parentController', function($scope) { 
    var vm = this; 
    vm.myVar = 'Hello from parent'; 
    this.refreshMyVar = function(data) { 
     // You should not directly refer "this" inside refreshMyVar function 
     // since "refreshMyVar" function is executed in context of directive 
     // "this" will refer "myDirective" controller scope 
     // console.log("this :" this); // try to uncomment and see what "this" holds 
     // If you use "vm" you will be able to get hold of actual "myVar" due to 
     // closure formed by refreshMyVar function when it was created. 
     // console.log("vm :" vm); // try to uncomment and see what "vm" holds 
     // Reading about closures(JavaScript concept) will help you. 
     vm.myVar = data.name; 
     console.log(vm); 
     alert('>> this.myVar ' + vm.myVar); 
     // Since refreshMyVar is executed in context of directive, you have do 
     // $apply on parent scope to apply changes 
     $scope.$parent.$apply(); 
    }; 
});

を以下のようにする必要があります。

出典

2016-10-01 03:33:11

あなたの答えのおかげで、私は投稿のコードは一例でしたが、ときに私のコード、私はES6、を使用してい '' ' this.refreshMyVar =データ=> { \t this.myVar = data.name ; \t console.log（ '>> this.myVar'、this）; \t $ scope。$ parent。$ apply（）; }; '' ' だから$ scope。$ parent。$ apply（）;私の問題を解決する – JFouad

コントローラー変数を更新し、view（from 1.5）のビューで使用します。

答えて

関連する問題