AngularJS：控制器之間的數據傳遞和範圍問題

Question

我在控制器之間進行變量作用域和/或傳遞數據時遇到了問題。一個控制器嵌套在另一個控制器內。當嵌套控制器的其中一個值發生變化時，我希望將其反映到其父控制器中。這沒有發生。我想我必須創建一個服務來將數據從子控制器傳遞給父控制器，但我不知道如何去做。我開始編寫一些代碼，但是當我試圖實現它時，它不起作用。首先，我將給出沒有服務的代碼。

父級和子級控制器包含在其自己的子模塊中，並且該應用程序依賴於這兩個子模塊。該服務將在子控制器的模塊中定義。我不確定這很重要，或者模塊的範圍很重要，因爲它們都嵌入在同一個應用程序中。

我想從子控制器向父控制器傳遞值$scope.activeOn，只要其值改變。這將由switchProcessing();功能處理。我試圖模擬按鈕切換和進度條（自定義toggle指令）。當按鈕切換到關閉狀態時，進度條變爲零。否則，如果它打開，它會顯示後端生成的值。

的index.html

<div ng-controller="ParentCtrl"> 
    <div ng-controller="ChildCtrl"> 
     <toggle on="activeOn" off="activeOff" ng-click="switchProcessing();"></toggle> 
    </div> 
</div> 

切換模板

<div class="btn-group btn-toggle"> 
    <button class="btn btn-sm" ng-class="{'btn-success':on, 'btn-default':!on}">ON</button> 
    <button class="btn btn-sm" ng-class="{'btn-danger':off, 'btn-default':!off}">OFF</button> 
</div> 

parentCtrl.js

angular 
    .module('app.parent') 
    .controller('ParentCtrl', ParentCtrl); 

function ParentCtrl($scope, $http, $timeout) { 

    $scope.max = 20000; 
    //$scope.activeOn = true; 

    $scope.getData = function() { 
     $http.get('http://url/to/data') 
      .success(function(data, status) { 
       $scope.dynamic = data[0].currentDepth; 
       $scope.xsiteStatus = status; 
      }); 
    }; 

    $scope.intervalFunction = function() { 
     $timeout(function() { 
      $scope.getData(); 
      $scope.intervalFunction(); 
     }, 10000); 
    }; 

    $scope.switchProcessing = function() { 
     if($scope.activeOn === true) { 
      $scope.activeOn = false; 
      $scope.dynamic = 0; 
     } else { 
      $scope.activeOn = true;   
     } 
    }; 

    $scope.intervalFunction(); 
} 

個childCtrl.js

angular 
    .module('app.child') 
    .controller('ChildCtrl', ChildCtrl); 

function ChildCtrl($scope) { 

    $scope.activeOn = true; 
    $scope.activeOff = false; 
} 

app.js

angular.module('app', ['app.parent', 'app.child']); 

到目前爲止，我已經編寫服務...

angular.module('opsConsole.child') 
    .service('buttonToggleService', buttonToggleService); 

function buttonToggleService() { 

    var buttonSwitch = true; 

    var getButtonStatus = function(buttonSwitch) { 
     return buttonSwitch; 
    }; 

    return { 
     getButtonStatus: getButtonStatus 
    }; 
} 

Answer 1

一個簡單的方法來處理，這是將需要更改的值移動到範圍內的對象，而不是坐在直線上y在範圍內。

您的子作用域繼承父作用域的值。它可以修改這些值，但重新綁定它們不會影響父值。

所以在父範圍：

$scope.state = { activeOn: false, activeOff: true }; 
$scope.switchProcessing = function() { 
    if($scope.state.activeOn === true) { 
     $scope.state.activeOn = false; 
     $scope.dynamic = 0; 
    } else { 
     $scope.state.activeOn = true;   
    } 
}; 

現在的孩子可以安全地修改state對象：

function ChildCtrl($scope) { 

    $scope.state.activeOn = true; 
    $scope.state.activeOff = false; 
} 

和HTML需要改變相應：

<div ng-controller="ParentCtrl"> 
    <div ng-controller="ChildCtrl"> 
     <toggle on="state.activeOn" off="state.activeOff" ng-click="switchProcessing();"></toggle> 
    </div> 
</div>