ディレクティブで更新されたコントローラ変数で角度$ウォッチが動作しない

コントローラマッピング変数を使用してディレクティブから更新されたウォッチを配置しようとしています。変数は更新され、コンソールにログインしていますが、動作していないことを監視します。

コードスニペット：

index.htmlを

<body ng-app="myApp" ng-controller="myCtrl"> 
<div> 
    <test on-click="update()"></test> 
</div>

app.js

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

myApp.controller('myCtrl', function($scope){ 

    $scope.test = { 
    value: false 
    }; 

    $scope.update = function() { 
    $scope.test.value = !$scope.test.value; 
    console.log("Update: " + $scope.test.value); 
    }; 

    $scope.$watch('test', function(newVal){ 
    console.log("Watch: " + newVal.value); 
    }, true); 

}); 

myApp.directive('test', function($compile){ 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { 
     onClick: '&' 
    }, 
     template: '<div ng-transclude=""></div>', 
     link: function(scope, element, attrs) { 
      var $buttonElem = $('<button>Test</button>').appendTo(element); 

      $buttonElem.click(function(){ 
      scope.onClick(); 
      }); 
     } 
    } 
});

Plunkerリンクは次のとおりです。https://plnkr.co/edit/41WVLTNCE8GdoCdHHuFO?p=preview

出典

2016-05-09 Prateek

リンク機能で 'scope。$ apply（）'を呼び出してみてください。 – Kyle

できません。ディレクティブを更新できない第三者のライブラリとみなします。 – Prateek

@Prateekしかし、同じことをするあなたのコントローラーの更新機能の中では、 '$ timeout（function（）{$ scope. $ apply（）;}）;'を実行することはできます（醜い場合でも） –

問題は、テンプレートにng-clickを使用する代わりに、AngularJS以外のコードを使用してイベントを呼び出すことです。ディレクティブを変更できない場合は、$ scopeにイベントハンドラをラップしてください。

$scope.update = function() { 
    $scope.$apply(function(){ 
     $scope.test.value = !$scope.test.value; 
     console.log("Update: " + $scope.test.value); 
    }); 
};

出典

2016-05-09 14:24:40 adam0101

Thanks Adam。これは機能しているようです。 – Prateek

ディレクティブで更新されたコントローラ変数で角度$ウォッチが動作しない

答えて

関連する問題