Question

我可能会对mvc和angularjs感到困惑，并试图设置一个布尔值来控制范围变量以隐藏div。

我有一个列表html页面，其中包含：

 <tbody>{{isAuthorised}}
            <tr ng-repeat="calendarEvent in items" id="event_{{calendarEvent.Id}}">
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                <td>{{calendarEvent.EventDate | date:mediumDate}}</td>
                <td><img src="{{calendarEvent.ThumbnailUrl}}" alt="" width="100" /></td>
                <td>
                    <div ng-show="isAuthorised"> 
                        <a href="#/edit/{{calendarEvent.Id}}"><i class="glyphicon glyphicon-edit"></i></a>
                        <a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>

我正在输出当前值以试图弄清楚发生了什么。因此，如果我通过设置值来点击此页面，则div显示我不想要的编辑和删除按钮。范围变量的值显示为{}。

我有这个app.js代码：

 var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {

    ** lots of stuff removed as irrelevant **

        $scope.isAuthorised = SharedService.get();
    };

我的登录控制器通过单独的html内容部分设置值（在共享服务中）

var LoginCtrl = function ($scope, $location, $http, SharedService) {

    $scope.login = function () {
        $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress + "/")
        .success(function (result) {
            var isAuthorised = result.toLowerCase();
            if (isAuthorised) {
                SharedService.set(isAuthorised);
                $location.path('/');
            } else {
                alert('you do not have the power!');
            }

        })
        .error(function() {
             alert('Email could not be Validated at this time');
        });

    }
};

结果是返回bool类型的MVC方法。我想也许我需要将bool转换为小写，因为javascript更喜欢它，但也许是在做一些隐式转换为字符串或什么的东西？！我不确定在我的列表html中需要更改什么才能在值为true时正确显示div。我来自.NET背景，AngularJS理解有限。

值似乎已设置，因为如果我输入有效的电子邮件地址，我会看到

真

在范围变量为的html页面中。

它似乎在Chrome中运行一次 - 但现在它不起作用，只显示应隐藏的内容。

抱歉忘了包含共享服务：

EventsCalendarApp.factory('SharedService', function() {
    var savedData = {}

    function set(data) {
        savedData = data;
    }

    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get
    }
});

Answer 1

我认为如果您的服务处理的是对象引用而不是布尔值（这是一个原始的），那么控制器，服务和UI中的所有内容都会被简化。

您的服务：

EventsCalendarApp.factory('SharedService', function() {
    var savedData = { isAuthorised: false }

    function set(data) {
        // overwrites savedData properties with data's properties, 
        // but preserves the reference
        angular.copy(data, savedData);
    }
    function setAuthorised(authorised) {
        savedData.isAuthorised = authorised;
    }

    function get() {
        return savedData;
    }

    return {
        set: set,
        get: get,
        setAuthorised: setAuthorised
    }
});

您的登录控制器：

var LoginCtrl = function ($scope, $location, $http, SharedService) {

    // helper function to determine if str contains 'true'
    function parseBoolean(str) {
          return /^true$/i.test(str);
    }        
    $scope.login = function () {
        $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress + "/")
        .success(function (result) {
            var isAuthorised = parseBoolean(result);
            if (isAuthorised) {
                SharedService.set({ isAuthorised: isAuthorised });
                // OR
                SharedService.setAuthorised(isAuthorised);

                $location.path('/');
            } else {
                alert('you do not have the power!');
            }

        })
        .error(function() {
             alert('Email could not be Validated at this time');
        });

    }
};

您的列表控制器：

 var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {

    ** lots of stuff removed as irrelevant **

        $scope.savedData = SharedService.get();
    };

HTML：

<tbody>{{savedData.isAuthorised}}
            <tr ng-repeat="calendarEvent in items" id="event_{{calendarEvent.Id}}">
                <td><strong>{{calendarEvent.EventTitle}}</strong><br/>{{calendarEvent.EventDescription}}</td>
                <td>{{calendarEvent.EventDate | date:mediumDate}}</td>
                <td><img ng-src="{{calendarEvent.ThumbnailUrl}}" alt="" width="100" /></td>
                <td>
                    <div ng-show="savedData.isAuthorised"> 
                        <a href="#/edit/{{calendarEvent.Id}}"><i class="glyphicon glyphicon-edit"></i></a>
                        <a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>

使用对象引用时，对服务中引用的任何更改都会自动传播到视图;对控制器内发生的引用的任何更改也是如此。这背后没有真正的魔力 - 它们会自动更新，因为它们是相同的参考。相反，当您使用基元时，则传递值的副本，并且使它们保持同步变得更具挑战性。

注意：在不相关的注释中，您应该将ng-src用于绑定表达式的图像URL。这可确保在评估和呈现表达式后，浏览器仅下载图像URL。

Answer 2

var LoginCtrl = function ($scope, $location, $http, SharedService) {

$scope.login = function () {
    $http.get("/AuthorisedUser/IsValidUser/" + $scope.item.ValidEmailAddress + "/")
    .success(function (result) {

        $scope.isAuthorised = result.toLowerCase();

    })
    .error(function() {
         alert('Email could not be Validated at this time');
    });

}

};

请记住，$ scope作为控制器和视图之间的桥梁。如果您的控制器更新$ scope，您的视图将被更改。不要在这里使用sharedservice。它对你想要做的事没用。试试我的上述代码片段。

Answer 3

所以答案是更新ListCtrl以获得这个逻辑：

var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {
    var authorised = SharedService.get();
    if (authorised != "true")
        $scope.isAuthorised = false;
    else
        $scope.isAuthorised = SharedService.get();
};

它现在似乎正在运作！我仍然对javascript中布尔值的处理感到困惑，因为我似乎在各种方法中混合了布尔值和字符串。

angularjs ng-show未按预期显示

3 个答案: