Question

我是棱角分明的新人，我在解决这个问题时遇到了问题。如何在不重新加载应用程序的情况下更改绑定数据。

//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也包含在导航栏中我可以一直看到它并且我看到它不会立即改变，我想这是因为我正在修改的管理员控制器与链接到导航控制器的管理员控制器不一样bar，所以这里最大的问题是如何在一个控制器中更改数据，以及在同一个控制器的其他实例中进行更改。

    //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']);
})();

Answer 1

使用同一个控制器的每个路由都将创建一个新的实例。通常，控制器不是为保持状态而设计的。

如果您想要了解有关设计的好文章，请Todd's one is good。

Answer 2

如果您想共享或使用具有不同状态的同一控制器，您可以使用this jsfiddle example。

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.");
});

使用ui-router的两个状态使用相同的控制器不能立即改变数据

2 个答案: