Question

我在导航栏上有多个视图但搜索输入相同，问题是：如何使用导航栏中的输入更新view1Ctrl，View2Ctrl或anyCtrl中的数据

-------编辑1 ------- 我的问题不是具体的

我想使用导航栏中的输入来更新view1Ctrl，View2Ctrl或anyCtrl中的数据以及控制器如何知道是否使用了serch输入？

在实际代码中，我有一个调用$ http get函数的服务，并且在成功时更新数据

$scope.loadMore = function() {
$scope.busy = true
data.all(page)
    .then(function success (response) {
        var data = response.data
        for(var i = 0; i < data.length; i++) {
            $scope.array1.push(data[i])
        }
        page++

        $scope.busy = false
    })
}

$scope.searchData = function (search) {
$scope.busy = true
$scope.array1 = [];
data.all(page, search)
    .then(function success (response) {
        var data = response.data
        for(var i = 0; i < data.length; i++) {
            $scope.array1.push(data[i])
        }
        page++

        $scope.busy = false
    })
}

我创建了一个plnkr来澄清任何疑问。

https://plnkr.co/edit/tENpWjPAzbV0GBg52L1V?p=preview

感谢您的帮助！

App.js

var app = angular.module('plunker', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .otherwise("/home/view1");

  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "./home-main.html",
    })

  .state('home.view1', {
    url: "/view1",
    templateUrl: "./view1.html",
    controller: "view1Ctrl"
  })

  .state('home.view2', {
    url: "/view2",
    templateUrl: "./view2.html",
    controller: "view2Ctrl"
  })
})


app.directive('navbar', function() {
  return {
    restrict: 'EA',
    templateUrl: './navbar.html',
    controller: 'view1Ctrl'
  }
})

app.controller('view1Ctrl', function($scope) {
  $scope.array1 = [1, 2, 3, 4];
  $scope.search = ''

  $scope.onSearch = function() {
    console.log('calling onSearch')
    $scope.array1 = [1.1, 1.2, 1.3, 1.4]
  }
});

app.controller('view2Ctrl', function($scope) {
  $scope.array1 = [1, 2, 3, 4];
  $scope.search = ''

  $scope.onSearch = function() {
    console.log('calling onSearch')
    $scope.array1 = [1.1, 1.2, 1.3, 1.4]
  }
});

Answer 1

尝试这个嵌套视图：

.state('home.nav', {
                    url: "/",

                    'content@': {
                        templateUrl: './navbar.html',
                        controller: 'view1Ctrl'
                    }
                })

或者您可以使用摘要：

.state('my-app', {
                      abstract: true,
                      views: {
                          'navtest': {
                              templateUrl: './pathTonav',
                              controller: "navcontroller"
                          }
                      }
                  })

然后您可以将新的自定义元素添加到根html页面：

<div ui-view="navtest"><\div>

Answer 2

app.directive('navbar', function() {
  return {
    restrict: 'EA',
    templateUrl: './navbar.html',
    controller: 'navbarCtrl'
  }
});

app.controller('navbarCtrl', function($scope){
   //your search stuff
 }

<body ng-app='youreapp'>
     <navbar></navbar>
    <div ng-view></div>
</body>

多条路线相同的搜索输入

2 个答案: