использование одного и того же контроллера для двух состояний с ui-router не может мгновенно изменить данные

Question

использование одного и того же контроллера для двух состояний с ui-router не может мгновенно изменить данные

0

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

//routes.js

  function MainRouter ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state ('About', {
      url: '/about',
      templateUrl: 'js/about/about.html',
      controller: 'adminController',
      controllerAs: 'vm'
    })
    .state ('Admin', {
      url: '/admin',
      templateUrl: 'js/admin/admin.html',
      controller: 'adminController',
      controllerAs: 'vm'
    })
  }

Я пытаюсь создать простой веб-сайт с "консолью администратора", который позволяет пользователю изменять содержимое страниц. Приложение работает, но не обновляет содержимое без повторной загрузки приложения...

Маршрут '/admin' имеет входы для изменения данных через функцию, которая обновляет базу данных. Я загружаю содержимое из базы данных при загрузке страницы, поэтому изменения остаются, когда пользователи выходят из системы, но я также привязываю данные, чтобы вы могут видеть изменения в реальном времени.

//admin.html

  <div class='about-page-options>
    <form name='changeAboutTitle' ng-submit='vm.changeContent()'>
      <div class='about-page-options-title input-field'>
        <input type='text' ng-model='vm.changeContentInput.aboutTitle'>
        <label>title</label>
      </div>
      <div>
        <button class='btn' type='submit'>Change</button>
      </div>
    </form>
  </div>

Контроллер имеет функцию changeContent.

//adminController.js
  function adminController($http, Upload, adminService){
    var vm=this
    vm.loadContent=loadContent
    vm.aboutTitle = ''
    vm.changeContent = changeContent
    vm.changeContentInput = {}


//Load Content Page from database when loading the app
    function loadContent () {
      console.log('load content triggered')
      $http({
        method:'GET',
        url:'/api/content'
      }).then(
        function(res){
          vm.aboutTitle = res.data[0].aboutTitle
        }
      );
    };
    loadContent()

function changeContent () {
  adminService.changeContent(vm.changeContentInput).then(function (res) {
    vm.aboutTitle = res.data.aboutTitle
  })
 }
}
})();

В этом случае содержимое, которое я хочу изменить, - vm.aboutTitle. Приложение меняет его, я вижу его, когда перезагружаю страницу. Но поскольку vm.aboutTitle также включен в навигационную панель, я все время вижу это, и я вижу, что это не меняется немедленно, я думаю, это происходит потому, что контроллер администрирования, который я изменяю, не совпадает с тем, который связан с навигацией бар, поэтому большой вопрос здесь заключается в том, как изменять данные в одном контроллере, а также изменять в других случаях одного и того же контроллера.

    //index.html
<html ng-app='myapp'>
      <head>
        <meta charset='utf-8'>
        <title>myapp</title>    
      </head>

  <body>
    <div class="navbar-fixed" ng-controller='adminController as vm'>
      <nav>
        <div class='nav-bar'>
          <div class='brand-logo'>
            <div id='logo'>MyLogo</div>
          </div>
          <ul>
            <li><a ui-sref='home' id='home'>Home</a></li>
            <li><a ui-sref='About'>{{vm.aboutTitle}}</a></li>
          </ul>
        </div>
      </nav>
    </div>

    <div ui-view></div>


</body>
</html>

Я также создал услугу на всякий случай, если это поможет мне решить эту проблему, но пока не повезло. Любой совет???

//adminService.js
function adminService ($http) {
    var service={
      changeContent: changeContent
    }
    return service;

    function changeContent (data) {
      console.log(data)
      var promise = $http({
        method: 'PUT',
        url: 'api/content',
        data: data,
      }).then (
        function (res) {
          return res;
        }
      )
      return promise
    };
  }

А также

//app.js
(function() {
  angular.module('myapp', ['ui.router', 'ngResource']);
})();

vanpeta 24 июль 2016, в 00:34

Источник

0

Пожалуйста, попробуйте сделать минимальный и полный пример вашей проблемы, как описано в справочном центре: stackoverflow.com/help/mcve
zoom 23 июль 2016, в 22:46

Теги:

angularjs

angular-ui-router

2 ответа

Ещё вопросы

Пожалуйста, попробуйте сделать минимальный и полный пример вашей проблемы, как описано в справочном центре: stackoverflow.com/help/mcve

Quethzel · Answer 1 · 2018-03-26T22-42-00.000Z

если вы хотите поделиться или использовать один и тот же контроллер с разными состояниями, вы можете использовать этот пример jsfiddle.

HTML

<nav> 
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
    <a ui-sref="state3">State 3</a>
</nav>

<div ui-view></div>

AngularJs

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

var routeTemplate1 = "<p>Content of State 1 with Ctrl1</p>";
var routeTemplate2 = "<p>Content of State 2 with Ctrl2</p>";
var routeTemplate3 = "<p>Content of State 3 with Ctrl1</p>";

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider
        .state("state1", {
        url: "#",
        template: routeTemplate1,
        controller: "Ctrl1"
      })
      .state("state2", {
        url: "#",
        template: routeTemplate2,
        controller: "Ctrl2"
      })
      .state("state3", {
        url: "#",
        template: routeTemplate1,
        controller: "Ctrl1"
      });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller( "Ctrl1", function($scope) {
    console.log("Ctrl1 loaded.");
});

ctrls.controller( "Ctrl2", function($scope) {
    console.log("Ctrl2 loaded.");
});

Mateusz Sip · Answer 2 · 2016-07-23T21-33-00.000Z

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

Если вы ищете хорошее представление о дизайне, Тодд хорошо.