Угловой UI-маршрутизатор - доступ к $ scope вне ui view

Question

Я хочу получить доступ к $ scope вне моего пользовательского интерфейса. Моя структура приложения проста. Это приложение TODO имеет три панели, как этот My todo app design

Вот полный код https://github.com/udayghulaxe/ticitic_todo

То, что я хочу, я хочу, чтобы получить доступ, чтобы сделать деталь на третьей панели, и я должен сделать это с помощью $ rootScope, который не является надлежащим способом отправки данных, я назначил отдельные контроллеры для каждой из трех панелей. Я изменяю состояние маршрутизатора пользовательского интерфейса при щелчке. Я просто хочу, чтобы получить доступ, чтобы сделать данные в третьей панели

<!-- Routers --> 
 

 
.state('dashboard', { 
 
    url: '/dashboard', 
 
    abstract: true, 
 
    views: { 
 
    '': { 
 
     templateUrl: './partials/main.html' 
 
    }, 
 
    'header_toolbar@dashboard': { 
 
     templateUrl: './views/header_toolbar.html' 
 
    }, 
 
    'sidenavleft@dashboard': { 
 
     templateUrl: './views/sidenav.html' 
 
    }, 
 
    
 
    'todo_detail@dashboard': { 
 
     templateUrl: './views/todo_detail.html' 
 
    } 
 

 
    } 
 
}) 
 

 
.state('dashboard.listdetail', { 
 
    url: '/lists/:list_id/', 
 
    templateUrl: './partials/list.detail.html', 
 
    controller: 'ListController', 
 
    resolve: { 
 
    list_id: function($stateParams) { 
 
     return $stateParams.list_id; 
 
    } 
 
    }, 
 
    data: { 
 
    authorizedRoles: [USER_ROLES.user], 
 
    pageTitle: 'Lists' 
 
    } 
 
}) 
 

 
.state('dashboard.tododetail', { 
 
    url: '/lists/:list_id/:todo_id', 
 
    templateUrl: './partials/list.detail.html', 
 
    controller: 'TodoDetailController', 
 
    resolve: { 
 
    list_id: function($stateParams) { 
 
     console.log($stateParams); 
 
     return $stateParams.list_id; 
 
    }, 
 
    todo_id: function($stateParams) { 
 
     console.log($stateParams); 
 
     return $stateParams.todo_id; 
 
    } 
 
    } 
 
}) 
 

 
<!-- ----------------Controllers --------------------- -> 
 

 
app.controller("ListController", ['$rootScope', '$scope', '$state', '$q', 'UserService', '$window', 'AuthService', 'DataService', 'AUTH_EVENTS', 'list_id', '$mdSidenav', 
 
    function($rootScope, $scope, $state, $q, UserService, $window, AuthService, DataService, AUTH_EVENTS, list_id, $mdSidenav) { 
 
    $scope.value = 'this is value2'; 
 
    $rootScope.list_id = list_id.toString(); 
 
    $rootScope.todo_id = ''; 
 
    $scope.current_list = UserService.GetTodoBylistid($rootScope.lists, $scope.list_id); 
 

 
    function toggleSidenav(menuId) { 
 
     $mdSidenav(menuId).open(); 
 
    }; 
 

 
    $scope.Toggle_Todo_Detail = function(todo_id) { 
 
     $state.go('dashboard.tododetail', { 
 
     list_id: $scope.list_id, 
 
     todo_id: todo_id 
 
     }, { 
 
     reload: false 
 
     }); 
 

 
     toggleSidenav('right'); 
 
    }; 
 

 
    } 
 
]); 
 

 

 
app.controller("TodoDetailController", ['$rootScope', '$scope', '$state', '$q', 'UserService', '$window', 'AuthService', 'DataService', 'AUTH_EVENTS', 'list_id', '$mdSidenav', 'todo_id', 
 
    function($rootScope, $scope, $state, $q, UserService, $window, AuthService, DataService, AUTH_EVENTS, list_id, $mdSidenav, todo_id) { 
 

 
    } 
 
]);

<!-- Main.html --> 
 

 
<div id="appContainer" md-theme="{{ dynamicTheme }}" ng-init="load()" md-theme-watch> 
 
    <!-- Header Toolbar --> 
 
    <div ui-view="header_toolbar"></div> 
 

 
    <div layout="row" layout-xs="column" layout-sm="column"> 
 
    <!-- Sidenav right view --> 
 
    <div ui-view="sidenavleft" id="nav_container"></div> 
 

 
    <!-- Main middle container --> 
 
    <div flex="100" flex-gt-sm="55" layout="column" id="list_content"> 
 
     <md-content layout="column" flex class="md-padding"> 
 
     <div ui-view></div> 
 
     </md-content> 
 
    </div> 
 

 
    <!-- Todo Detail View --> 
 
    <div ui-view="todo_detail" id="todo_detail_view"></div> 
 
    </div> 
 
</div>

Я не хочу, чтобы передать данные по $ rootScope, и когда я щелкаю по пункту Todo, как TODO список и делать детали должны работать, теперь, когда я нажимаю, чтобы сделать средний шаблон, просто исчезает.

я столкнулся этот вопрос, потому что я добавил мой «Todo Detail View» вне зрения пользовательского интерфейса, и я хочу, чтобы получить доступ к данным в «Todo Detail View»

Answer 1

как имя переменной $scope уже намекает, что цель заключается в быть ограниченным и, следовательно, не быть доступным извне. Указанный $ rootScope - это способ общения между хорошо связанными детьми/родителями.

«Рекомендуемый» способ обмена данных между различными контроллерами ИМ, как правило, угловые услуги, которые вводят во всех контроллерах, потребляющие или манипулирование их данные: https://docs.angularjs.org/guide/services

например что-то вроде этого

app.service('todoService', function() { 
    var myTodos = []; 
    this.addTodo = function (todo) { 
     myTodos.push(todo); 
    } 
    this.getAllTodos = function(filter) { 
     return myTodos.filter(filter); 
    } 
}); 

app.controller('firstController', function($scope, todoService) { 
    // use todoService.addTodo() and such stuff 
});