angularjs - использовать директиву для изменения родительской области

Question

Я пытаюсь изменить свойство родительской области в пределах директивы.

Это структура этого раздела моего проекта (это может помочь понять, что происходит):

-details 
--overview.html 
--edit.html 
--main.html 
-directive 
--template.html 
--controller.js 

директива/controller.js

restrict: 'E' 
    scope: { 
    mode: '@mode', 
    id: '@id' 
    }, 
    replace: true, 
    templateUrl: './directive/template.html', 
    link: function (scope, element, attrs){ 
    console.log ("link function scope:", scope); 
    console.log ("Parent Scope:", scope.$parent.$parent.current); 
    } 

директива/шаблон .html:

<div class="Selector"> 
    <div> 
     <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open-{{id}}"/> 
     <label class="menu-open-button" for="menu-open-{{id}}"> 
      <i class="zone-details-current-mode icon-mode-{{mode}}"></i> 
      <span class="hamburger hamburger-1"></span> 
      <span class="hamburger hamburger-2"></span> 
      <span class="hamburger hamburger-3"></span> 
     </label> 
    </div> 
</div> 

я называю выше директиву детали/main.html, как показано ниже:

<selector mode="{{current.mode}}" id="{{current.ID}}"></selector> 

мои app.js конфигурации маршрутизатора заключается в следующем:

.config([ 
    '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('app.details', { 
     name: 'appDetails', 
     url: '/:zoneID', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     } 
     } 
    }).state('app.details.overview', { 
     name: 'appDetailsOverview', 
     url: '/overview', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     }, 
     'zone': { 
      templateUrl: './details/overview.html', 
      controller: 'mainController' 
     } 
     } 
    }).state('app.details.edit', { 
     name: 'appDetailsEdit', 
     url: '/edit/day/:timerEditDay', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     }, 
     'zone': { 
      templateUrl: './details/edit.html', 
      controller: 'mainController' 
     } 
     } 
    }); 
    $urlRouterProvider.otherwise('app/myHouse'); 
    } 
]); 

Что эта директива должна быть в состоянии чтобы изменить режим при нажатии на определенную кнопку. Режим находится внутри scope.current, но для доступа scope.current, я не понимаю, почему мне нужно добавить два $parent s.

Кроме того, в качестве побочного примечания при изменении режима необходимо «обновить» раздел с новым режимом на месте.

Любая помощь? как я могу использовать директиву для изменения родительской области? Спасибо за любую помощь и предложение

Answer 1

scope: { 
    mode: '=mode', // CHANGE THIS TO = 
    id: '@id' 
}, 
// remove brackets here 
<selector mode="current.mode" id="{{current.ID}}"></selector> 
// in link function 
scope.mode = [new mode]; 

О последнем пункте: просто использовать $ сфера $ часы в контроллере.. Или вы можете пойти на $ on/$ emit. Проверка угловой обработки событий в сети довольно проста.

Answer 2

Изменить режим на =mode, чтобы включить двустороннюю привязку данных, @ передает значение как строку.

scope: { 
    mode: '=mode', 
    id: '@id' 
},