AngularJS與AngularJS材質的範圍問題

Question

我一直在試圖創建一個對話框，我可以編輯一些信息。重點是你打開對話框，並且已經存在的對話框中有這些對話框，你可以編輯它並保存它。我的問題是將信息從普通頁面傳遞到對話框。下面是控制器代碼：

export class MainController { 
    constructor ($scope, $log, $document, $mdDialog, demosService) { 
     'ngInject'; 

     $scope.addDemo = function (name, html) { 
      demosService.addDemo(name, html); 
     }; 

     $scope.removeDemo = function (name, html) { 
      demosService.removeDemo(name, html); 
     }; 

     $scope.updateDemo = function (oldName, newName, html) { 

     }; 

     $scope.getDemoInfo = function (name) { 

     }; 

     $scope.getDemos = function() { 
      return demosService.getDemos(); 
     }; 

     $scope.hide = function() { 
      $mdDialog.hide(); 
     }; 

     $scope.cancel = function() { 
      $mdDialog.cancel(); 
     }; 

     $scope.saveNew = function() { 
      $scope.addDemo($scope.newdemo.name, $scope.newdemo.html); 
      $scope.cancel(); 
     }; 

     $scope.loggle = function (log) { 
      $log.log(log); 
     } 

     $scope.saveEdit = function (oldname) { 
      //$scope.updateDemo($scope.demo.name, $scope.demo.newname, $scope.demo.newhtml); 
      console.log($scope.oldname + ", " + $scope.newname + ", " + $scope.newhtml); 
     }; 

     $scope.showNewDemo = function (ev) { 
      $mdDialog.show({ 
       controller: MainController, 
       template: "<form ng-cloak style='width: 800px'><md-toolbar><div class='md-toolbar-tools'><h2 style='color: #fff !important;'>New Demo</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'>" 
       +   "<i class='material-icons' style='color: #fff !important;'>clear</i></md-button></div></md-toolbar><md-dialog-content>" 
       + "<div class='md-dialog-content'><md-input-container class='md-block'><label>Name</label><input ng-model='newdemo.name'></md-input-container></div><md-input-container class='md-block' style='padding-left: 25px; padding-right: 25px;'><label style='margin-left:25px; margin-bottom: 5px;'>HTML</label><textarea ng-model='newdemo.html' rows='5' md-select-on-focus></textarea></md-input-container ></md-dialog-content><md-dialog-actions layout='row'>" 
+       "<span flex></span><md-button ng-click='cancel()'>Cancel</md-button><md-button ng-click='saveNew()'>Save</md-button></md-dialog-actions></form>", 
       parent: angular.element($document.body), 
       targetEvent: ev, 
       clickOutsideToClose: true, 
       fullscreen: $scope.customFullscreen 
      }); 
     }; 

     $scope.newname = "foo"; 
     $scope.newhtml = "bar"; 

     $scope.showEditDemo = function() { 
      console.log($scope.newname + ", " + $scope.newhtml + ", " + $scope.oldname); 
      $mdDialog.show({ 
       controller: MainController, 
       template: "<form ng-controller='MainController' ng-cloak style='width: 800px'><md-toolbar><div class='md-toolbar-tools'><h2 style='color: #fff !important;'>Edit Demo</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'>" 
       + "<i class='material-icons' style='color: #fff !important;'>clear</i></md-button></div></md-toolbar><md-dialog-content>" 
       + "<div class='md-dialog-content'><md-input-container class='md-block'><label>Name</label><input ng-model='newname'></md-input-container></div><md-input-container class='md-block' style='padding-left: 25px; padding-right: 25px;'><label style='margin-left:25px; margin-bottom: 5px;'>HTML</label><textarea ng-model='newhtml' rows='5' md-select-on-focus></textarea></md-input-container></md-dialog-content><md-dialog-actions layout='row'>" 
       + "<span flex></span><md-button ng-click='cancel()'>Cancel</md-button><md-button ng-click='loggle()'>Save</md-button></md-dialog-actions></form>", 
       parent: angular.element($document.body), 
       targetEvent: ev, 
       clickOutsideToClose: true, 
       fullscreen: $scope.customFullscreen 
      }); 
     }; 
    } 
} 

現在，$scope.newname = "foo";和$scope.newhtml = "bar";作品，但問題是，我需要通過一個範圍的功能，以改變這些，即：

$scope.setVariables = function (name, html) { 
    $scope.newname = name; 
    $scope.newhtml = html; 
} 

如果你試圖console.log()那些來自函數內部的變量，它們可以正常工作，但是從對話框內部，它將恢復到原來的值，如函數外部所述。該功能是必需的，具有這些值的對話框也是必需的。謝謝大家！

Answer 1

我有一個類似的情況，並通過讓當前控制器加倍作爲mdDialog的控制器來解決它。這裏是我使用的代碼：

 var me = this 
     this.$mdDialog.show({ 
      templateUrl: "components/listFilter/listFilterDialog.html", 
      targetEvent: $event, 
      parent: parentEl, 
      controller: function() { return me }, 
      controllerAs: '$filterController', 
      clickOutsideToClose: true, 
      escapeToClose: true 
     }) 

我沒有使用$ scope，因爲好吧，首先，這是不好的。 :)如果您使用控制器A或更好的組件，您將獲得更多的里程。

話雖這麼說，我認爲，如果你使用類似：

var thisScope = $scope 
$mdDialog.show({ 
       controller: MainController, 
       template: "...", 
       locals: { data: thisScope} 
       parent: angular.element($document.body), 
       targetEvent: ev, 
       clickOutsideToClose: true, 
       fullscreen: $scope.customFullscreen 
      }); 

我認爲這將工作或接近。這會將名爲data的項目注入到對話框的控制器中。然後你會在你的模板中綁定它。

Answer 2

您可以通過服務傳輸數據。

例如，假設使用兩父子頁面服務讓我們說myService

然後你想從父控制器到子控制器通過一些數據，那麼你就可以在父設置的值控制器的服務如下：

myService.myObject=scope.myObject; 

之後你可以從服務訪問同一個對象在你的孩子控制器如下：

$scope.myObject=myService.myObject; 

希望這會有所幫助