Asp.net mvc 4 在ASP.NET MVC 4中使用AngularJS检测更改

我有一个现有的MVC4应用程序，其中有多组复选框，我需要检测用户何时进行了更改，即选中或取消选中复选框。如果用户进行了更改，并且他们试图离开页面，我需要提示他们保存更改。我只是在学习AngularJS，但我想我可以用它来检测复选框状态何时发生变化，也可以用AngularJS中的路由来检测用户何时离开页面

我的代码基于答案。由于视图已经由MVC呈现，我不能使用REST服务和angular来填充模型和视图

视图中呈现的HTML

<div id="userPermissions" class="userWrapper" ng-app="myApp.User">      
<div id="actionCategories" class="section" ng-controller="UserCtrl">
    <div class="actionGroupBody">
        <div class="actionGroupAction">
             <input type="checkbox" value="Create new users" 
            id="action-f9ae022b-5a53-4824-8a79-f7bbac844b11" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('f9ae022b-5a53-4824-8a79-f7bbac844b11')"
            ng-click="updateSelection($event,'f9ae022b-5a53-4824-8a79-f7bbac844b11')"/>Create new users 
         </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit users" 
            id="action-5525d5e7-e1dd-4ec3-9b1d-3be406d0338b" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"
            ng-click="updateSelection($event,'5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"/>Edit users
        </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit personal account" 
            id="action-9967c1c2-c781-432b-96df-224da760bfb6" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('9967c1c2-c781-432b-96df-224da760bfb6')"
            ng-click="updateSelection($event,'9967c1c2-c781-432b-96df-224da760bfb6')"/>Edit personal account
        </div>
    </div>
<div class="caption">
            <label class="actionGroupCaption">Store</label> <span class="actionCategorySelectAll"><input type="checkbox" value="select all Store" id="7bace6c1-4820-46c2-b463-3dad026991f2" data-action-category="selectall"/>All</span>
        </div>
        <div class="actionGroupBody">
            <div class="actionGroupAction">
                <input type="checkbox" value="Access home page" 
                id="action-fba7e381-4ed8-47ce-8e85-b5133c9ba9f7" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"
                ng-click="updateSelection($event,'fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"/>Access home page
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit settings" 
                id="action-2d02b77b-14a4-4136-a09f-fd51eecd2dbe" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"
                ng-click="updateSelection($event,'2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"/>Edit settings
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit products" 
                id="action-f42f933c-a2b8-42e8-af4b-d52f90f58ddb" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"
                ng-click="updateSelection($event,'f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"/>Edit products
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit orders" 
                id="action-92ed258b-c954-46e4-b5c9-a89fdb5c54d9" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"
                ng-click="updateSelection($event,'92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"/>Edit orders
            </div>
        </div>
</div>
</div>

创建新用户
编辑用户
编辑个人帐户
全部存储
访问主页
编辑设置
编辑产品
编辑订单

这是角度代码

 var app = angular.module('myApp.User', []);

app.controller('UserCtrl', function ($scope) {
    $scope.entities = [{ //how to populate with checkboxes state from view? factory maybe similar to below??? // }];

    $scope.selected = [];
    var updateSelected = function (action, id) {
        if (action == 'add' & $scope.selected.indexOf(id) == -1)
            $scope.selected.push(id);
        if (action == 'remove' && $scope.selected.indexOf(id) != -1)
            $scope.selected.splice($scope.selected.indexOf(id), 1);
    };

    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id);
    };

    $scope.selectAll = function ($event) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        for (var i = 0; i < $scope.entities.length; i++) {
            var entity = $scope.entities[i];
            updateSelected(action, entity.id);
        }
    };

    $scope.getSelectedClass = function (entity) {
        return $scope.isSelected(entity.id) ? 'selected' : '';
    };

    $scope.isSelected = function (id) {
        return $scope.selected.indexOf(id) >= 0;
    };

    $scope.isSelectedAll = function () {
        return $scope.selected.length === $scope.entities.length;
    };
});

    app.factory('UserDataService', function () {

    var service = {}

    service.getData = function () {
        var actions = $("input[id^=action-]");

        return actions;
    }

    return service;    
});

var-app=angular.module（'myApp.User'，[]）；
app.controller（'UserCtrl'，函数（$scope）{
$scope.entities=[{//如何从视图中填充复选框状态？工厂可能与下面类似？？？//}]；
$scope.selected=[]；
var updateSelected=函数（操作，id）{
if（action='add'&$scope.selected.indexOf（id）=-1）
$scope.selected.push（id）；
if（action='remove'&&$scope.selected.indexOf（id）！=-1）
$scope.selected.splice（$scope.selected.indexOf（id），1）；
};
$scope.updateSelection=函数（$event，id）{
var复选框=$event.target；
var action=（checkbox.checked？'add'：'remove'）；
updateSelected（操作，id）；
};
$scope.selectAll=函数（$event）{
var复选框=$event.target；
var action=（checkbox.checked？'add'：'remove'）；
对于（变量i=0；i<$scope.entities.length；i++）{
var entity=$scope.entities[i]；
updateSelected（action，entity.id）；
}
};
$scope.getSelectedClass=函数（实体）{
返回$scope.isSelected（entity.id）？“selected”：“”；
};
$scope.isSelected=函数（id）{
返回$scope.selected.indexOf（id）>=0；
};
$scope.isSelectedAll=函数（）{
返回$scope.selected.length==$scope.entities.length；
};
});
app.factory（'UserDataService'，函数（）{
var服务={}
service.getData=函数（）{
var actions=$（“输入[id^=action-]”）；
返回动作；
}
回程服务；
});

---

每当我单击复选框时，$scope函数（.updateSelection、.isSelected等）都不存在在控制器中点火。

ng app='myApp.User'的声明在哪里？上面的HTML在一个DIV中，如下所示：由于空间原因，我不想将整个视图放在问题中。请查看上面的更改查看浏览器控制台以了解错误。如果您不能理解这些错误，请使用您得到的错误更新问题。我最初忘记将GUID括在单引号中，但在更正后，我在控制台中没有看到任何错误。我更新了问题。在控制器帮助中使用factory服务填充模型会有帮助吗？