我可能会对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
}
});
答案 0 :(得分: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。
答案 1 :(得分:0)
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。它对你想要做的事没用。试试我的上述代码片段。
答案 2 :(得分:0)
所以答案是更新ListCtrl以获得这个逻辑:
var ListCtrl = function ($scope, $location, CalendarEvent, SharedService) {
var authorised = SharedService.get();
if (authorised != "true")
$scope.isAuthorised = false;
else
$scope.isAuthorised = SharedService.get();
};
它现在似乎正在运作!我仍然对javascript中布尔值的处理感到困惑,因为我似乎在各种方法中混合了布尔值和字符串。