Question

我有以下路线：

.state('cloud', {
    url: '/cloud',
    views: { 
        'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' },
        'choices-header': { templateUrl: 'pages/templates/views/choices-header.html', controller: 'cloud' }
    }
})

我这样做是因为我需要选择标题模板进入与主模板不同的视图。

choices-header 模板中的

#options_header应显示$scope.cloud_selected_items是否包含项目。

但由于某种原因，当一个项目被添加到数组时，它不知道这一点，因此该元素不会显示。但是，如果我使用数组中的项重新加载页面，它将显示。所以我知道代码是正常工作。

有没有人知道我需要对cloudCheck()函数做什么，以便范围更新，我的模板会看到$scope中的更改？

所以在我的索引页面中，我有：

<div ui-view="choices-header"></div>
<div id="pageContent">
    <div ui-view="main"></div>
</div>

cloud.html

<div ng-repeat="data in items">
   <div ng-click="cloudCheck(data.id)">Click me</div>
</div>

choices_header.html

<div id="option-header" ng-show="cloud_selected_items.length > 0">
    {{ cloud_selected_items.length }} selected
</div>

的javascript

.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams) {
    $scope.cloud_selected_items = [];

    $scope.cloudCheck = function(id) {
        $scope.cloud_selected_items.push(id);
    }
}

Answer 1

我认为代码的问题在于您的视图中不会共享范围。范围将在嵌套视图中继承，但您有两个单独的视图。

如果您执行console.log($scope)，您会看到云控制器将以不同的范围运行两次。您可以通过范围属性$id看到范围不同。

您可以使用跟踪所选项目的服务。然后双向绑定将按预期更新标题视图。

请参阅下面的代码（不在这里工作，在o上使用ui-router的cookie问题），这里是jsFiddle的工作演示。

angular.module('myApp', ['ui.router'])
    .controller('cloud', function ($scope, $state, cloudService) {
        $scope.items = [{
            id: 1,
            data: 'test1'
        },
        {
            id: 2,
            data: 'test2'
        },
        {
            id: 2,
            data: 'test2'
        }]; //dummy data
        $scope.cloud_selected_items = cloudService.getItems();
        
        $scope.cloudCheck = cloudService.cloudCheck;
        /*function(item) {
            console.log(id);
            $scope.cloud_selected_items.push(item);
        };*/
})
.factory('cloudService', function() {
    var cloudSelectedItems = [];
    
    var cloudService = {
        cloudCheck: function(item) {
            cloudSelectedItems.push(item);
        },
        getItems: function() {
            return cloudSelectedItems;
        }
    };
    
    return cloudService;
})
.config(function ($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/cloud");
    //
    // Now set up the states
    $stateProvider.state('cloud', {
        url: '/cloud',
        views: { 
            'main': {
                templateUrl: 'partials/cloud.html', controller: 'cloud' 
            },
            'choicesheader': { 
                templateUrl: 'partials/choices_header.html', 
                controller: 'cloud' 
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>

<script type="text/ng-template" id="partials/choices_header.html">
    <div id="option-header" ng-show="cloud_selected_items.length > 0">
    {{ cloud_selected_items.length }} selected
</div>
</script>

<script type="text/ng-template" id="partials/cloud.html">
    <div ng-repeat="data in items">
        <button ng-click="cloudCheck(data.id)">Click me</button>
    </div>
</script>

<div ng-app="myApp">
  <div ui-view="choicesheader"></div>
  <div id="pageContent">
    <div ui-view="main"></div>
  </div>
</div>

使用具有相同控制器的多个模板更新$ scope

1 个答案: