ディレクティブを変更する方法コントローラ内の分離スコープ変数を、それを分離したままで変更しますか？

Question

私は隔離された範囲で指示を持っています。私は、ディレクティブのコントローラの親コントローラから渡された変数のうちの1つを修正しています。私が実行している問題は、同じディレクティブ（異なるoptionsとmodel）の複数のインスタンスを同じビューで使用すると、optionsオブジェクトはディレクティブの各インスタンスに固有のままではないということです。代わりに、それは共有変数になり、ディレクティブのすべてのインスタンスは同じoptionsオブジェクトを使用します。だから、

私はoptionsA.isFlagOn = trueとoptionsB.isFlagOn = false

<my-directive model="modelA" options="optionsA"> 
<my-directive model="modelB" options="optionsB"> 

optionsAとmodelB負荷の指令に、以下のように私の見解では、それらを使用した場合。

特定のインスタンスごとにoptionsを変更する際に、どうすればよいですか？

angular.module('myModule', []) 
.directive('myDirective', function($compile) { 
    template = '<h3><span ng-bind="model.title"><h3><p><span ng-bind="options"></span></p>'; 
    return { 
    restrict: 'AE', 
    scope: { 
     model: "=", 
     options: "=?" //A JSON object 
    }, 
    controller: function($scope) { 
     $scope.options = $scope.options || {}; 
     //A function that sets default values if no options object passed 
     ensureDefaultOptions($scope); 

     //now based on some of the options passed in, I modify a property in the options object 
     if ($scope.options.isFlagOn) 
     $scope.options.thisProp = true; 
    }, 
    link: function(scope, element, attr) { 
     let content = $compile(template)(scope); 
     element.append(content); 
    } 
    }; 
} 

編集：私は私の問題を解決しました。私の解決策は以下の答えに掲載されています。

Answer 1

あなたとあなたに一方向のバインディングを変更することができ：

scope: { 
     model: "=", 
     options: "<?" //A JSON object 
    } 

Answer 2

あなたのディレクティブはデフォルト値と組み合わせるオプションに渡されたのコピーを作成し、その各ディレクティブのインスタンス必要があり、独自のオプションオブジェクトを持っています。

あなたはこれが唯一の初期化中に一度行われますので、あなたのオプションは、非同期コントローラから来た場合、あなたは余分な処理が必要になりますことをextend

var defaultOptions = { a:1, b:2, c:3 }; 
var options = angular.extend(defaultOption, $scope.options); 
// then use options everywhere 

ノートを使って、簡単にそれを達成することができます。

Answer 3

1.4x以上のAngularディレクティブのbindToControllerプロパティを使用して解決しました。

angular.module('myModule', []) 
    .directive('myDirective', function($compile) { 
    template = '<h3><span ng-bind="vm.model.title"><h3><p><span ng-bind="myOptions"></span></p>'; 
    return { 
     restrict: 'AE', 
     bindToController: { 
     model: "=", 
     options: "=?" //A JSON object 
     }, 
     scope: {}, 
     controller: function() { 
     var vm = this; 

     //a function that handles modifying options 
     vm.setOptions = function(options){ 
      let newOptions = {}; 
      angular.copy(options, newOptions); 

      // modify newOptions here 

      return newOptions; 
     } 

     }, 
     controllerAs: 'vm', 
     link: function(scope, element, attr) { 

     ensureDefaultOptions(scope.vm); 

     scope.myOptions = scope.vm.setOptions(scope.vm.options); 

     let content = $compile(template)(scope); 
     element.append(content); 
     } 
    }; 
    });