角度指令とコントローラ

Question

私には指令とコントローラがあります。休閑としてディレクティブ：

calcP.directive('modalDialog', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      show: '=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.dialogStyle = {}; 
      if (attrs.width) 
       scope.dialogStyle.width = attrs.width; 
      if (attrs.height) 
       scope.dialogStyle.height = attrs.height; 
      **scope.hideModal = function() { 
       scope.show = false; 
       delete $sope.types.individual;** 
      }; 
     }, 
     template: "..." 
    }; 
}); 

マイコントローラ：

calcP.controller('calcPCtrl', function($scope, $http, $window, emailSenderEndpoint) { 

$scope.getVariantDomovoy = function() { 
     $scope.types.domovoy = $scope.variants.domovoy; 
    }; 
    $scope.getVariantIndividual = function() { 
     $scope.types.individual = $scope.variants.individual; 
    }; 

    ... 
    $scope.modalShown = false; 
     $scope.toggleModal = function() { 
      $scope.modalShown = !$scope.modalShown; 
     }; 

    }); 

マイテンプレート：

template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" 

私は機能に追加して、いくつかの$スコープを削除したいと思います。しかし、ブラウザは変数$ scope.types.individualが見つからないというエラーを表示します。

私は自分自身でAangularJSを学習しようとしていますが、まだいくつか問題があります。

Answer 1

コントローラーの値をディレクティブから変更する場合は、まずその変数をディレクティブに2方向バインディングで渡す必要があります。次に、その値を以下のように変更することができます。

calcP.directive('modalDialog', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      show: '=', 
      types: '=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.dialogStyle = {}; 
      if (attrs.width) 
       scope.dialogStyle.width = attrs.width; 
      if (attrs.height) 
       scope.dialogStyle.height = attrs.height; 
      **scope.hideModal = function() { 
       scope.show = false; 
       scope.types.individual = "";** 
      }; 
     }, 
     template: "..." 
    }; 
}); 

あなた$scope.typesコントローラからの指令に渡していることを確認してください。あなたがshowパラメータを渡すのと同じ

は

<model-dialog show="show" types="types"></model-dialog>