Why don't the variables overlap?

Question

JavaScript

Registration form controllers in two steps, depending on the step, I change the style of the links:

regControllers.controller('FirstStepCtrl', ['$scope', '$routeParams', '$rootScope',
  function($scope, $routeParams, $rootScope) {

    $scope.$parent.linkclass.state1 = 'active';
    $scope.$parent.linkclass.state2 = 'allow'; 
... });

regControllers.controller('SecondStepCtrl', ['$scope', '$routeParams', '$rootScope',
  function($scope, $routeParams, $rootScope) {

    $scope.$parent.linkclass.state1 = 'allow';
    $scope.$parent.linkclass.state2 = 'active'; 
...
});

so, when switching to controller 2, nothing happens

<a href="" ng-click="goStep(1)" class="{{linkclass.state1}}">Шаг 1</a>
<a href="" ng-click="goStep(2)" class="{{linkclass.state2}}">Шаг 2</a>

Answer 1

$scope.$parent
you don't have to do that. for good, your code should not know anything at all about what is in Scope, other than what you explicitly add there. No $parent needs to be accessed.
What you do through two controllers can actually be combined into one controller, or taken out to a third higher level.

Answer 2

@Fesor implemented like this:

function($routeProvider) {
    $routeProvider.
      when('/step-1', {
        templateUrl: 'reg/step-1.html',
        controller: 'FirstStepCtrl'
      }).
      when('/step-2', {
        templateUrl: 'reg/step-2.html',
        controller: 'SecondStepCtrl'
      }).

Is there anything I can do in my case?
ps I tried rootScope, the same garbage
or how best to do it?

Answer 3

In edit mode, enable CNC support for the component and, as I understand it, write in the "Detailed view page" field and insert between the sharps (#) the symbolic code of this very id (DMI55GQQ4Z4M4C9O650E7ENLW)

Answer 4

As a result, the product page looks like: catalog/product.php?id=DMI55GQQ4Z4M4C9O650E7ENLW

Give an example of how you would like it to look.
I hope not in realtime the data is requested?