angularjs ng显示未按预期显示

我可能对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>

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

结果是MVC方法返回bool类型。我想可能我需要将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
    }
});

})

请记住，$scope是控制器和视图之间的桥梁。如果控制器更新$scope，则视图会发生更改。

---

不要在这里使用sharedservice。这对你想做的事毫无用处。试试我上面的代码片段

所以答案是更新ListCtrl，使其具有以下逻辑：

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

---

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

我认为如果您的服务处理对象引用而不是布尔值（这是一个基本值），那么控制器、服务和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();
    };

您的列表控制器：

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:

{{savedData.isauthorized}
{{calendarEvent.EventTitle}
{{{calendarEvent.EventDescription}
{{calendarEvent.EventDate}日期：mediumDate}

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

注意：另一个不相关的注意事项是，对于作为绑定表达式的图像URL，应该使用ng src。这可确保图像URL仅在表达式求值和呈现后由浏览器下载

---

把这个问题弄得一团糟。对不起，我不知道这意味着什么。如果你说的是以某种方式使用jsfiddle.net来复制这个问题，我不知道如何将我得到的转换成简单的html和javascript部分，因为我有两个html页面（在SPA中）调用MVC控制器。我不确定通过破解这些值，我是否会复制我当前的场景。首先，为什么不在输入时检查您的电子邮件id是否有效。如果电子邮件id有效，请允许用户继续。否则不允许。我有一个维护活动日历的单页应用程序，它只是一个快速且肮脏的应用程序，但我想“锁定它”-因此我已将授权电子邮件地址添加到数据库中，因此我希望用户必须验证其电子邮件地址一次，然后可以编辑和添加他们喜欢的内容。我想因为我在两个控制器之间，所以范围会被重置。例如，我在登录控制器中设置了该值，但随后我更新了单页应用程序以显示事件列表，然后调用列表控制器并进行搜索等。因此，我更新了loginCtrl以使用该值设置$scope.isAuthorised，并从ListCtrl中删除了$scope.isAuthorised=SharedService.get（）行。这使添加/编辑/删除链接停止显示（即使通过登录输入了有效的电子邮件地址）。如果我将$scope.isAuthorised=SharedService.get（）放回原处，它似乎可以按预期处理真/假值。除非我硬刷新我的页面，在这种情况下，它将{}显示为作用域变量的值，并显示添加/编辑/删除链接。如果在共享服务中没有值，则初始化listCtrl上的值似乎已经做到了这一点。添加它是为了回答我原来的帖子。@micronyks我很乐意学习正确的方法！我不确定你说的哪一部分是错的？另一个答案不适用于我，从我所读到的内容来看，在多个控制器之间共享数据需要共享服务。不，我不是说你的代码是错误的。它是正确的，您设置的所有内容都是正确的。我只是说这不是正确的方法。你们仍然可以有更好的解决方案。但是当你在学习时，随着你的进步，你会有更好的指挥能力。所以很好。享受你的编码！感谢@micronyks为yonks完成了windows开发，重返网络是一个相当大的挑战：）感谢您的详细解释。这似乎比我的解决方案要简洁得多。很高兴了解ng src:）np:）从IsValidUser Web API调用返回字符串的原因是因为它返回原语。如果您返回一个Result对象（即类Result{bool isauthorized{get；set；}}），则无需强制转换。结果对象可以jsonified，但基元返回值不能jsonified。

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

    ** lots of stuff removed as irrelevant **

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

<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>