Angular指令和控制器

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。

我只是試着自己學習AngularJS，還是有一些問題。

Answer 1

如果要從指令中更改控制器的值，首先必須使用雙向綁定將該變量傳遞給指令。然後你可以改變這個值如下。

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>