Угловая область родительского дочернего объекта с сервисом

Question

Я завораживаю некоторыми понятиями Углового, в частности, потока переменной и области видимости.

Что я пытаюсь сделать, это установить переменную в дочернем контроллере и передать ее в родительскую область. Рассмотрим простой пример:

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.hex = hexafy.myFunc(17);  
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 

} 

module.service('hexafy', function() { 
    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
}); 

Тогда моя наценка выглядит следующим образом:

{{hex}} 

<section data-ng-controller="listingsViewController">....</section> 

Расчет осуществляется с помощью контроллера ребенка, но, как вы можете видеть, я хотите передать переменную в «parent». Я читал о «родительской» области, но я понимаю, что это не лучшая практика, поэтому я пытаюсь использовать службу. Где я иду не так?

Answer 1

Есть много различных пути к достижению этого, и я бы рекомендовал следующий подход (используя общий $scope object variable как в родительском, так и в дочернем контроллере) вместо использования службы, поскольку это намного проще и более чистый подход.

Затем вы можете получить доступ к значению hex в родительском контроллере, используя $scope.shareValue.hex.

module.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.shareValue.hex = hexafy.myFunc(17); 
} 

module.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    var shareValue = { 
     hex: '' 
    }; 
    $scope.shareValue = shareValue; 
} 

=========================================== ===================================== Обновлено с использованием сервиса:

Answer 2

Вы должны сначала установить значение, используя служебную функцию в вашем дочернем контроллере, а затем в своем родительском контроллере используйте функцию getvalue в родительском контроллере.

Ваша функция setvalue и getvalue должна быть в обслуживании.

Код контроллера

app.controller('childController', childController); 
function childController($scope,$http,$window, hexafy) { 
    $scope.childValue = "Value in child controller" 
    hexafy.setValue($scope.childValue);  
} 

app.controller('parentController', parentController); 
function parentController($scope, hexafy) { 
    $scope.parentValue = hexafy.getValue() 
} 

Сервисный

app.service('hexafy', function() { 

    var value = ""; 
    this.setValue = function(val) { 
    value = val 
    }, 

    this.getValue = function() { 
    return value; 
    } 


    this.myFunc = function (x) { 
     return x.toString(16); 
    } 
}); 

Html код

<div ng-controller="childController"> 
     <h2>Child controller</h2> 
     {{childValue}} 

    </div> 

    <div ng-controller="parentController"> 
     <h2>Parent controller</h2> 
     {{parentValue}} 

    </div> 

взглянуть на работающий plunker