javascript - 在其他地方显示来自对象的数据

所以我目前在项目中使用的是Angular，但是我无法添加动态内容。

因此，我创建了一个带有ng-repeat的列表，当我单击它时，我从单击的特定项目中获取了所有信息，并将其添加到新的范围项目中。

        $scope.click = function() {
            $scope.personData = this.person;
        };

现在我想在特定的地方打印{{personData.name}}，它在元素中可以正常工作，但是当我想在元素之外的其他地方（例如NG视图中的另一页）使用它时，将完全相同的控制器链接到它，尽管我在我访问的页面上未更新相同的数据。

在那里

app.controller('showDataController', function(jsonData, $scope, infoService) {
    jsonData.async().then(function(response) {

        $scope.data = response;

        $scope.click = function() {
            infoService.setPersonData(this.person);
        };

    });
});

app.service('infoService', function() {
    var people = {};
    function setPersonData(person) {
        people[person.name] = person; // assuming person is an object
        return people;
    }

});

最佳答案

那是因为在每次视图/状态重新加载时，控制器都会重新加载，因此没有对该作用域的引用。 $ scope指向当前控制器。要在应用程序中传递对象，请创建可以使用get和set方法存储和检索该信息的服务或工厂。然后，用于添加项目的控制器代码可以是：

$scope.click = function() {
    myService.setPersonData(this.person);
};

并获取它：

$scope.personData = myService.getPersonData(this.person.name); // a reference to that person is needed

您的服务设置和获取方法可能类似于：

var people = {};

function setPersonData(person) {
    people[person.name] = person; // assuming person is an object
    return people;
}

function getPersonData(name) {
    return people[personName];
}

更新资料

根据问题中的更新代码，尝试以下操作：

app
.service('infoService', infoService)
.controller('showDataController', showDataController);

showDataController.$inject = ['jsonData', '$scope', 'infoService']; // this makes your code minification safe

function infoService() {
    var people = {};

    // returns an object with references to the methods defined in the service - aka the Revealing Module Pattern
    return {
        setPersonData: setPersonData
        //getPersonData: getPersonData (comment out once this method is declared below)
    };

    function setPersonData(person) {
        people[person.name] = person; // assuming person is an object
        return people;
    }

});

function showDataController(jsonData, $scope, infoService) {
    jsonData.async().then(function(response) {

        $scope.data = response;

        $scope.click = function() {
            infoService.setPersonData(this.person);
        };

    });
});

注意：通常我会将应用程序的不同组件放在不同的文件中。 https://github.com/johnpapa/angular-styleguide是一个不错的样式指南，但https://github.com/toddmotto/angularjs-styleguide等其他样式指南

关于javascript - 在其他地方显示来自对象的数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33957763/