Question

＆＃13;

<body ng-controller="addressbookController">
    <div class="header">
        <h3>Address Book</h3>
    </div>
    <div class="nav-bar">
        <ul>
            <li><a ui-sref="Index">HOME</a></li>
            <li><a ui-sref="OpenForm" id="add-link">+ADD</a></li>
            <li><img src="~/Content/Images/blog-icon.png" /></li>
        </ul>
    </div>
    <div class="contacts-container">
        <h3>CONTACTS</h3>
        <div class="contacts-list-container" >
            <ul ng-controller="detailController">
                <li ng-repeat="contact in contacts" class="list-style">
                    <a id={{contact.Id}} ui-sref="Details" ng-click="showContactDetail(contact.Id)">
                        <span class="list-name" ng-bind="contact.Name"></span>
                        <span class="list-phone-email">+91 {{contact.MobileNumber}}</span>
                        <span class="list-phone-email" ng-bind="contact.Email"></span>
                    </a>
                </li>
            </ul>
        </div>
        <div ui-view></div>
    </div>
</body>
</html>

＆＃13;

在这里，我从数据库中获取联系人并以列表的形式显示联系人，当我点击一个联系人时，它应该显示该联系人的完整详细信息。

＆＃13;

<div class="details-container">
    <span class="detail-name" ng-bind="foundContact.Name"></span>
    <div class="delete-edit-container">
        <div class="edit-container">
            <a ng-click="editForm(foundContact.Id)" ui-sref="Edit">
                <img src="~/Content/Images/Edit-icon.png" style="height:15px;width:15px;" />
                <label>EDIT</label>
            </a>
        </div>
        <div class="delete-container">
            <a ng-click="delete(foundContact.Id)" ui-sref="Delete">
                <img src="~/Content/Images/delete1.png" style="height:20px;width:20px;" />
                <label>DELETE</label>
            </a>
        </div>
    </div>
    <div>
        <div class="detail-email">
            <label>Email:</label>
            <span ng-bind="foundContact.Email"></span>
        </div>
        <div class="detail-mobile-landline">
            <label>Mobile:+91 </label>
            <span ng-bind="foundContact.MobileNumber"></span><br>
            <label>Landline:</label>
            <span ng-bind="foundContact.LandlineNumber"></span>
        </div>
        <div class="detail-website">
            <label>Website:</label>
            <span ng-bind="foundContact.Website"></span>
        </div>
        <div class="detail-address">
            <label>Address:</label>
            <span ng-bind="foundContact.Address"></span>
        </div>
    </div>
</div>

＆＃13;

这是详细布局。

app.controller('detailController', ['$scope', '$state', 'UserServices', function ($scope, $state, UserServices) {
$scope.contact;
$scope.foundContact;
$scope.showContactDetail = function (id) {
    //$state.go('Details', { contactId: id });
    angular.element(document.getElementById(id)).addClass("highlight");
    UserServices.RemoveHighlight();
    UserServices.GetContactById(id).then(function (d) {
        $scope.foundContact = d.data;
    })
}
$scope.editForm = function (id) {
    UserServices.GetContactById(id).then(function (d) {
        $scope.contact = d.data;
    })
}
$scope.delete = function (id) {
    var contactId = id;
}

}]）;

这是我接触的详细控制器，并将其分配给显示详细信息的部分视图的foundcontact变量。

state('Details', {
    url: '/Details',
    templateUrl: 'Contact/Detail',
    controller: 'detailController'
}).

这是用于显示详细信息的config.js文件。

当我点击第一个片段空布局中存在的联系人链接时，我的问题是打开（没有联系人数据）。当我调试我将数据发送到detailcontroller的foundcontact。

如果我静态初始化foundcontact，则显示静态数据。如果我没有静态初始化，则显示空的详细信息布局

任何人都可以帮我解决这个问题。

修改

app.factory('UserServices', function ($http) {
var fact = {};
fact.GetContacts = function () {
    return $http.get('/Contact/GetContacts');   
}
fact.GetContactById = function (id) {
    return $http.get('/Contact/GetContactById/' + id);
}
fact.RemoveHighlight = function () {
    angular.element(document.getElementsByClassName('list-style')).removeClass("highlight");
}
return fact;

}）

这是用户服务代码。

Answer 1

我猜问题是角度消化周期。

更改showContactDetail方法签名，如下所示：

$scope.showContactDetail = function(id) {
    //$state.go('Details', { contactId: id });
    angular.element(document.getElementById(id)).addClass("highlight");
    UserServices.RemoveHighlight();
    UserServices.GetContactById(id).then(function(d) {
        $scope.$evalAsync(function() {
            $scope.foundContact = d.data;
        });
    });
}

控制器问题

1 个答案: