Question

我希望在Angular中的两个控制器之间传递数据，下面是我开始的代码

有两个视图，一个带有输入字段，另一个带有链接。当我在第二个视图中单击链接时，我应该能够设置状态，并且应该在第一个字段的输入字段中填充状态数据。

我尝试了几种方法，但我遗漏了一些东西。有人可以帮我吗

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
      <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.min.js"></script>        
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>

<script type="text/javascript">

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

myApp.config(['$stateProvider','$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {   
        var addBook = {
                name: 'addBook',
                url: '/addBook',
                template: '<h2>Add A book</h2> Data from View  <input type="text" ng-model={{input-text}}>'  ,
                data:""
            },
            viewBookv = {
                name: 'viewBookv',
                url: '/viewBook',                  
                   template: '<h2>View A book</h2><a href="#" ng-click="edit()"><span class="glyphicon glyphicon-edit">Edit</span></a> ' ,
            };
            $stateProvider.state(addBook, "controller: editUserCtrl");
        $stateProvider.state(viewBookv, "controller: editUserCtrl");   

    }])

myApp.controller('editUserCtrl', function($scope, $stateParams) {
  $scope.paramOne = $stateParams.data;
         $scope.edit = function () {
         event.preventDefault();                 

            $state.go("addBook");

    }

})


myApp.controller('mainController',function($scope, $rootScope, $state,$window){   

  $scope.addBook=function(){

    $state.go("addBook");

    };
   $scope.viewbookls= function(){


    $state.go("viewBookv");

    };

})
</script>

 </head>
<body>
    <div class="container">
        <div class="col">
        <div class="col-md-3" ng-controller="mainController">
            <ul class="nav">
                <li><a href="#"     ng-click="viewbookls()"> View Book </a></li>
                <li><a href="#"     ng-click="addBook()"> Add Book </a></li>
            </ul>
        </div>
        <div class="col-md-9">
             <div ui-view></div>

        </div>
        </div>
    </div>       

</body>
</html>

Answer 1

通常在角度中，控制器之间共享状态的方式是使用service。因此，通常设置的方式是设置服务，然后将该服务导入相关控制器，并在它们之间共享该数据。我已经修改了上面的示例以遵循这种模式（我不太确定你要做什么）

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
      <script data-require="angular.js@1.2.10" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.min.js"></script>        
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>

<script type="text/javascript">

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

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {   
        var addBook = {
                name: 'addBook',
                url: '/addBook',
                template: '<h2>Add A book</h2> Data from View <button ng-click="updateBook()">Update</button>  <input type="text" ng-model="inputText">'  ,
                controller: "addBookCtrl",
                data:""
            },
            viewBookv = {
                name: 'viewBooks',
                url: '/viewBook',                  
                template: '<h2>View A book</h2><div ng-repeat="book in bookList">{{book}}</div>',
                controller: "viewBookCtrl",
            };
            $stateProvider.state('addBook', addBook);
        $stateProvider.state('viewBooks', viewBookv);   

    }])

myApp.controller('addBookCtrl', function($scope, bookService) { 
  $scope.updateBook = function(){
    console.log( $scope.inputText)
    bookService.books.push($scope.inputText);
  }
})

myApp.controller('viewBookCtrl', function($scope, bookService) { 
  $scope.bookList = bookService.books
})

myApp.factory('bookService', function() {
  var bookService = {};
  bookService.books = [];
  return bookService;
});


myApp.controller('mainController',function($scope, $rootScope, $state,$window){   

  $scope.addBook=function(){

    $state.go("addBook");

    };
   $scope.viewbookls= function(){


    $state.go("viewBooks");

    };

})
</script>

 </head>
<body>
    <div class="container">
        <div class="col">
        <div class="col-md-3" ng-controller="mainController">
            <ul class="nav">
                <li><a href="#"     ng-click="viewbookls()"> View Book </a></li>
                <li><a href="#"     ng-click="addBook()"> Add Book </a></li>
            </ul>
        </div>
        <div class="col-md-9">
             <div ui-view></div>
        </div>
        </div>
    </div>       

</body>
</html>

这个例子的作用是，在添加书的文本框中，输入名称（然后点击更新），这会将它附加到一个数组，所以每次你这样做都会在该数组上得到一个新元素。从那里前往查看书页，你会看到你输入的所有不同的东西。

以角度方式在状态提供者之间传递数据

1 个答案: