在angularjs

Question

在我的MVC 5应用程序中，我想使用一些AngularJS。现在，我有一张项目卡。您可以通过以下网址致电此卡：

http://localhost/Project/Card/1

对于这张卡，我有一个projectTasks列表。根据id = 1参数，我希望AngularJS显示此列表，但我不知道如何获取id参数。我在看ngRoute，但我不想路由我只想在我的ProjectTaskController中构建一个动态URL。

到目前为止我所拥有的：

projectApp.js

(function () {
    var app = angular.module("projectApp", ["ngRoute"]
        .config(function ($routeProvider, $locationProvider) {
             //configure the routing rules here
            $routeProvider.when('/Card/:id', {
                controller: 'ProjectTaskCtrl'
            });

            // enable HTML5mode to disable hashbang urls
            $locationProvider.html5Mode(true);
        })
 }());

ProjectTask.js

(function (app) {
    var projectTaskCtrl = function ($scope, $routeParams) {

    alert($routeParams.id); // message: undefined
};

app.controller("ProjectTaskCtrl", projectTaskCtrl);
}(angular.module("projectApp")));

Answer 1

我使用ng-init解决了它：

在我的MVC5视图（Show.cshtml）中我添加了：

<div id="projectTasks" ng-app="ProjectApp">
    <div ng-controller="ProjectTaskCtrl">
        <input type="hidden" id="projectId" ng-model="projectId" ng-init="projectId=@ViewBag.projectId"/>
        <!-- some more code -->
    </div>
</div>

在我的ProjectTaskCtrl.js中：

(function (app) {
    var projectTaskCtrl = function ($scope) {

    $scope.$watch("projectId", function(){
        // I can now use projectId in whatever I want:
        alert($scope.projectId);
    });
};

app.controller("ProjectTaskCtrl", projectTaskCtrl);
}(angular.module("projectApp")));