Fatal编程技术网
  • angularjs/
  • 在AngularJS中的控制器之间传递数据

在AngularJS中的控制器之间传递数据

angularjs

在AngularJS中的控制器之间传递数据,angularjs,angularjs-service,angularjs-controller,2-way-object-databinding,Angularjs,Angularjs Service,Angularjs Controller,2 Way Object Databinding,我尝试在控制器之间传递数据，并为此提供了服务。但不知何故，当我试图获取数据时，它不起作用。我不知道我的错误在哪里。代码如下： 这是AngularJS文件： var app = angular.module('Application', []); app.controller('NotificationListController', function($scope,$http, NotificationService, Data) { var notif

我尝试在控制器之间传递数据，并为此提供了服务。但不知何故，当我试图获取数据时，它不起作用。我不知道我的错误在哪里。代码如下：

这是AngularJS文件：

    var app = angular.module('Application', []);    

    app.controller('NotificationListController', function($scope,$http, NotificationService, Data) {
        var notificationList = NotificationService.getNotificationList();
        notificationList.then(function(response){
            console.log(response);
            $scope.notificationData = response.data;
            return response;
        });
        $scope.setEditedNotification = function(notification){
            $scope.editedNotification = Data.setNotificationValue(notification);
        }
    });

app.controller('NotificationEditController', function($scope, Data, TemplateService){
    $scope.editedNotification=Data.getNotificationValue();
});

app.service('Data', function(){
    var NotificationData;
    return{
        getNotificationValue: function(){
            return NotificationData;
        },
        setNotificationValue: function(notificationData){
            NotificationData = notificationData;
        }
    }
});
这是我的index.html

<tr ng-repeat="notification in notificationData">
            <td>{{notification.name}}</td>
            <td>{{notification.sender}}</td>
            <td>{{notification.subject}}</td>
            <td>{{notification.template.name}}</td>
            <td><a class="btn btn-default" href="editNotification.html" role="button" ng-click="setEditedNotification(notification)">Edit</a></td>
            <td><a class="btn btn-default" href="#" role="button" ng-click="deleteNotification(notification.id, $index)">Delete</a></td>
        </tr>


{{notification.name}
{{notification.sender}}
{{notification.subject}}
{{notification.template.name}
edit.html：

<div class="form-group col-md-offset-1">
            <label for="inputNotifName" class="col-sm-1 control-label">Name</label>
            <div class="col-md-6">
                <input ng-model="editedNotification.name" type="text" class="form-control" id="inputNotifName" placeholder="Notification name">
            </div>
        </div><br><br>
        <div class="form-group col-md-offset-1">
            <label for="inputNotifSender" class="col-sm-1 control-label">Sender</label>
            <div class="col-md-6">
                <input ng-model="editedNotification.sender" type="email" class="form-control" id="inputNotifSender" placeholder="Sender">
            </div>
        </div><br>
        <div class="form-group col-md-offset-1">
            <label for="inputNotifSubject" class="col-sm-1 control-label">Subject</label>
            <div class="col-md-6">
                <input ng-model="editedNotification.subject" type="text" class="form-control" id="inputNotifSubject" placeholder="Subject">
            </div>
        </div>


名称



发件人


主题
我调试了它，发现调用Dara.setNotificationValue（notification）时$scope.editedNotification的值没有更新；。而且，当我在设置var NotificationData之后尝试获取它时，该值仍然为null。我想我调用服务的方式有问题。

我将向您展示一个简化的示例，希望它能让您走上正确的轨道。我通常不会写所有这些，但我知道，如果你试图从教程和示例中找出这些，而这些都不是你想要的，那会是多么令人沮丧。请注意，这是不符合生产要求的代码-仅用于说明目的

首先是代码中包含问题的部分：

notificationList.then(function(response){
    console.log(response);
    $scope.notificationData = response.data;
    return response; <-- get rid of this
});
您的服务定义实际上是一个工厂。使用
.service（）
时，必须使用
this.
来设置服务内部的方法。要返回您已经完成的函数，您需要使用
.factory（）
。我在示例代码中使用了工厂

在这里，您可以有效地将
$scope.editedNotification
设置为null。在示例代码中，我将工厂与getter/setter方法一起用于
selectedNotification
对象。我还广播了一个更改，因为在示例代码中，所有内容都在一个视图中。我强烈建议您使用路由解决方案，因为您在页面之间使用导航是导致空问题的原因-这是SPA的本质

下面是示例代码。首先是JS：

var app = angular.module('Application', []);

app.controller('NotificationListController', function($scope, $http, Data, NotificationService) {
    /* below I'm faking up some data, this replaces the following code from your original post
     with corrections:
    var notificationList = NotificationService.getNotificationList();
    notificationList.then(function(response) {
        console.log(response);
        $scope.notificationData = response.data;
    }); */
    $scope.notificationData = NotificationService.getNotificationList();

    $scope.setEditedNotification = function(notification) {
        Data.notificationData = notification;
    };

    $scope.deleteNotification = function(notificationId) {
        // whatever you do to delete a notification
        Data.notificationData = {};
    };
});

app.controller('NotificationEditController', function($scope, Data) {
    // here I am responding to an event that is raised when setting the 
    // selected notification - you should handle this via routing within
    // your app
    $scope.$on('notificationSelected', function () {
        $scope.editedNotification = Data.notificationData;
    });
});

app.factory('Data', function($rootScope) {
    var _notificationData = {};
    var service = {
        get notificationData() {
            return _notificationData;
        },
        set notificationData(value) {
            _notificationData = value || {};
            $rootScope.$broadcast("notificationSelected");
        }
    }
    return service;
});

app.service('NotificationService', function() {
    this.getNotificationList = function() {
        return [{
            id: 1,
            name: "Notification 1",
            sender: "Sender 1",
            subject: "Subject 1",
            template: {
                name: "Template 1"
            }
        }, {
            id: 2,
            name: "Notification 2",
            sender: "Sender 2",
            subject: "Subject 2",
            template: {
                name: "Template 2"
            }
        }, {
            id: 3,
            name: "Notification 3",
            sender: "Sender 3",
            subject: "Subject 3",
            template: {
                name: "Template 3"
            }
        }];
    }
});
以及HTML：

<div ng-app="Application">
    <div ng-controller="NotificationListController">
        <table border="1">
            <tr ng-repeat="notification in notificationData">
                <td>{{notification.name}}</td>
                <td>{{notification.sender}}</td>
                <td>{{notification.subject}}</td>
                <td>{{notification.template.name}}</td>
                <td><a class="btn btn-default" href="editNotification.html" role="button" ng-click="setEditedNotification(notification); $event.preventDefault();">Edit</a></td>
                <td><a class="btn btn-default" href="#" role="button" ng-click="deleteNotification(notification.id, $index); $event.preventDefault();">Delete</a></td>
            </tr>
        </table>
    </div>
    <div ng-controller="NotificationEditController">
        Selecting a notification in the table above should cause it to be displayed here.
        <div>
            ID: {{editedNotification.id}}
            <br> Name: {{editedNotification.name}}
            <br> Sender: {{editedNotification.sender}}
            <br> Subject: {{editedNotification.subject}}
            <br> Template: {{editedNotification.template.name}}
        </div>
    </div>
</div>


{{notification.name}
{{notification.sender}}
{{notification.subject}}
{{notification.template.name}
在上表中选择一个通知应使其显示在此处。
ID:{{editedNotification.ID}

名称：{{editedNotification.Name}

发件人：{{editedNotification.Sender}

主题：{{editedNotification.Subject}

模板：{{editedNotification.Template.name}
还有一个供你摆弄的。我希望这有帮助。可能有一些方法可以更好地构造此部分或重构部分，但希望这能让您开始。

使用此
$scope.editedNotification=Data.setNotificationValue（notification）时，您希望发生什么？setNotificationValue（）不返回任何内容，因此这可能是将
$scope.editedNotification
设置为null。如果看不到您如何设置
ng controller
，则可能是共享作用域导致此问题传播到另一个控制器。是的，可能是我错了，因为我将其分配给$scope.editedNotification。通过调用setNotificationValue（通知），我希望设置var NotificationData的值。它应该在调用set函数时更新。在这种情况下，即使我调用了set方法，该值仍然为null。所以我需要使用路由来获取所选数据？你有什么好的参考资料来了解它吗？我有一些参考资料，但很难理解。路由是为了在你的应用程序中导航。服务是您在控制器之间传递数据的方式。您有几种路由选择，但我推荐。有大量的资源可以学习路由和ui路由器。

var app = angular.module('Application', []);

app.controller('NotificationListController', function($scope, $http, Data, NotificationService) {
    /* below I'm faking up some data, this replaces the following code from your original post
     with corrections:
    var notificationList = NotificationService.getNotificationList();
    notificationList.then(function(response) {
        console.log(response);
        $scope.notificationData = response.data;
    }); */
    $scope.notificationData = NotificationService.getNotificationList();

    $scope.setEditedNotification = function(notification) {
        Data.notificationData = notification;
    };

    $scope.deleteNotification = function(notificationId) {
        // whatever you do to delete a notification
        Data.notificationData = {};
    };
});

app.controller('NotificationEditController', function($scope, Data) {
    // here I am responding to an event that is raised when setting the 
    // selected notification - you should handle this via routing within
    // your app
    $scope.$on('notificationSelected', function () {
        $scope.editedNotification = Data.notificationData;
    });
});

app.factory('Data', function($rootScope) {
    var _notificationData = {};
    var service = {
        get notificationData() {
            return _notificationData;
        },
        set notificationData(value) {
            _notificationData = value || {};
            $rootScope.$broadcast("notificationSelected");
        }
    }
    return service;
});

app.service('NotificationService', function() {
    this.getNotificationList = function() {
        return [{
            id: 1,
            name: "Notification 1",
            sender: "Sender 1",
            subject: "Subject 1",
            template: {
                name: "Template 1"
            }
        }, {
            id: 2,
            name: "Notification 2",
            sender: "Sender 2",
            subject: "Subject 2",
            template: {
                name: "Template 2"
            }
        }, {
            id: 3,
            name: "Notification 3",
            sender: "Sender 3",
            subject: "Subject 3",
            template: {
                name: "Template 3"
            }
        }];
    }
});



<div ng-app="Application">
    <div ng-controller="NotificationListController">
        <table border="1">
            <tr ng-repeat="notification in notificationData">
                <td>{{notification.name}}</td>
                <td>{{notification.sender}}</td>
                <td>{{notification.subject}}</td>
                <td>{{notification.template.name}}</td>
                <td><a class="btn btn-default" href="editNotification.html" role="button" ng-click="setEditedNotification(notification); $event.preventDefault();">Edit</a></td>
                <td><a class="btn btn-default" href="#" role="button" ng-click="deleteNotification(notification.id, $index); $event.preventDefault();">Delete</a></td>
            </tr>
        </table>
    </div>
    <div ng-controller="NotificationEditController">
        Selecting a notification in the table above should cause it to be displayed here.
        <div>
            ID: {{editedNotification.id}}
            <br> Name: {{editedNotification.name}}
            <br> Sender: {{editedNotification.sender}}
            <br> Subject: {{editedNotification.subject}}
            <br> Template: {{editedNotification.template.name}}
        </div>
    </div>
</div>