コントローラからディレクティブへデータを送信

Question

ディレクティブに送信したいが、コントローラ内のデータが変更された場合、そのデータを更新したままにしておきたい。

// Controller 
angular 
    .module('app') 
    .controller('IndexController', IndexController) 

IndexController.$inject = []; 
function IndexController() { 
    var vm = this; 
    vm.name = 'John'; 

    newName = function() { 
     vm.name = 'Brian'; 
    } 
    newName(); 

} 

// Directive 
angular 
    .module('app') 
    .directive('userName', userName); 

userName.$inject = ['$document']; 

function userName($document) { 

    var directive = { 
     restrict: 'EA', 
     template: '<div id="user"></div>', 
     replace: true, 
     scope: { 
      name: '=' 
     }, 

     link: function(scope, elem, attrs) { 
      console.log(scope.data); 
     } 
    } 
    return directive; 
} 

これは私が指示を使用する方法です。コントローラの変更後に常に新しい名前ではなく最初の名前が返されるという問題があります。

<div ng-controller="indexController"> 
    <user-name name="indexController.name"> 
</div> 

ありがとうございました。

Answer 1

あなたがちょうどあなたに感謝あなたのIndexcontroller

angular 
 
    .module('app', []) 
 
    .controller('IndexController', function($scope) { 
 
    var vm = this; 
 
    vm.name = 'John'; 
 

 
    vm.newName = function() { 
 
     vm.name = 'Brian'; 
 
     console.log(vm.name); 
 
    } 
 
    //vm.newName(); 
 

 
}) 
 
.directive('userName', ['$document', function() { 
 

 
    var directive = { 
 
     restrict: 'E', 
 
     template: '<div id="user"></div>', 
 
     replace: true, 
 
     scope: { 
 
      name: '=' 
 
     }, 
 

 
     link: function(scope, elem, attrs) { 
 
      console.log(scope.name); 
 
     } 
 
    } 
 
    return directive; 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="IndexController as vm"> 
 

 
<user-name name="vm.name"></user-name> 
 
    <button ng-click="vm.newName()">Click</button> 
 
</div>

Answer 2

コントローラにasを使用しないと、controller.propをスコープ内に使用​​できません。

コントローラ内部では、$scopeまたはthisを使用してメソッドを呼び出す必要があります。

• 以下のコードを確認してください。

angular 
 
    .module('app', []) 
 
    .controller('IndexController', function($scope) { 
 
    
 
    $scope.name = 'John'; 
 

 
    $scope.newName = function() { 
 
     $scope.name = 'Brian'; 
 
    } 
 
    $scope.newName(); 
 

 
}) 
 
.directive('userName', ['$document', function() { 
 

 
    var directive = { 
 
     restrict: 'E', 
 
     template: '<div id="user"></div>', 
 
     replace: true, 
 
     scope: { 
 
      name: '=' 
 
     }, 
 

 
     link: function(scope, elem, attrs) { 
 
      console.log(scope.name); 
 
     } 
 
    } 
 
    return directive; 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="IndexController"> 
 

 
<user-name name="name"></user-name> 
 
</div>