ディレクティブの内容を変更する必要があるカスタムディレクティブの属性値を動的に変更します。

Question

基本的に私はUrlを文字列として渡すカスタムディレクティブを作成しました。このディレクティブ内にコンテンツを作成するhttp.get()メソッドを呼び出しています。私が望むのは、新しいURLが別のJSONオブジェクトを返すため、annotation-url属性の値を変更することができます。しかし、私はコントローラからannotationDataを変更すると、ディレクティブがリフレッシュされないようです。

HTML

<span ng-click="annotatonData = 'data/annotations1.json'">John</span> 

<span ng-click="annotatonData = 'data/annotations2.json'">Marry</span> 

    <ng-annotate user-options="user" annotation-url="{{annotatonData}}"></ng-annotate> 

コントローラー：

app.controller('ngAnnotationsController', ['$scope', '$http', function ($scope, $http) { 

    //InIt default http get 

    $scope.annotatonData = 'data/annotations1.json'; 

}]); 

指令：

app.directive('ngAnnotate', function() { 
    return { 
     templateUrl: 'templates/...', 
     restrict: 'E', 
     scope: { 
      annotationUrl: "@" 

     }, 
     controller: ['$scope', '$http', function ($scope, $http) { 

      $http.get($scope.annotationUrl).then(function (response) { 
       $scope.data = response.data; 
       ... 
       ... 

Answer 1

まず、私はあなたが

scope: { 
    annotationUrl: "=" 
} 

に変更を提案あなたはそれがあるとして annotationUrlを維持したい場合は

あなたは値が

$scope.$watch('annotationUrl', function(newVal, oldVal) { 
    if (newVal != oldVal) { 
     $http.get(newVal).then(function (response) { 
      $scope.data = response.data; 
      ... 
      ... 
    } 
} 

を変更されるたび$httpを呼び出すためにウォッチャを追加することができますしかし、あなたは価値の変化をキャッチする $attr.$observe('annotationUrl', fn)を使用する必要があります。