如何通过angularjs ng-view和ng-route指令加载局部视图

时间:2016-10-03 21:28:23

标签: javascript jquery angularjs

我是Angular的全新人物。 我想使用ng-Route和ng-view加载两个不同的部分视图和单一控制器。但每次我在SpecialFields.cshtml下执行时,我都得到了这种类型的error

我已多次搜索并在堆栈溢出中测试了很多点,如下所示: angular multiple routes sharing one controller。 但代码无法正常运行。

如何解决此问题?如何通过ng-view和ng-route渲染部分视图? 提前致谢

SpecialField.cshtml是:

raw_input()

这是specialFieldController.js

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/App/Patients/SpecialFields/specialFieldController.js"></script>
    <script src="~/App/Common/Services/StorageService.js"></script>
    <div class="row" style="font-family:BYekan">
        <div class="col-md-12">
            <div class="portlet light portlet-fit bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class=" fa fa-cog font-green"></i>
                        <span class="caption-subject font-green bold uppercase">SpecialFields config</span>
                    </div>

                </div>
                <div class="portlet-body" ng-app="SpecialFields" ng-controller="SpecialFieldsController">
                    <div class="row" style="margin:0 1px;direction:rtl">
                        <div class="col-md-12">
                            <div class="row panel panel-default">
                                <div class="panel-body">
                                    <form name="frm" class="form-inline" >
                                        <div class="form-group col-md-6">
                                            <label for="fieldname" class="bold control-label">Field Name</label>
                                            <span class="required">*</span>
                                            <input type="text" name="fieldname" id="fieldname" class="form-control" required ng-model="specialfieldname" />
                                        </div>
                                        <div class="form-group  col-md-5 col-md-pull-1" >
                          <label for="fieldtype" class="bold control-label">Field Type:</label>
                                            <span class="required"> * </span>
                                            <select id="fieldtype" class="form-control" ng-model="specialfieldtype" ng-options="option for option in [Item1,Item2]">
                                                <option value="" class="placeholder" selected disabled>Item1</option>
                                            </select>
                                            <button class="btn btn-primary " type="submit" ng-click="addSpecialfield()">
                                                Add
                                                <span class="fa fa-plus-square-o" style="padding-right:5px;"></span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" col-md-12">
                            <table class="table table-striped table-bordered" id="sfields">
                                <thead>

                                    <tr>
                                        <th> Index</th>
                                        <th>Field name</th>
                                        <th>Field Type</th>
                                        <th>Edit</th>
                                        <th>Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="specialfield in specialfields">

                                        <td class="col-sm-2">
                                            {{$index+1}}
                                        </td>
                                        <td class="col-sm-4">
                                            {{ specialfield.specialfieldname }}
                                        </td>
                                        <td class="col-sm-4">
                                            {{ specialfield.specialfieldtype }}
                                        </td>
                                        <td class="col-sm-1">
                                            <a href="#/update" class="btn btn-default">
                                                Edit
                                                <span class="glyphicon glyphicon-check"></span>
                                            </a>
                                        </td>
                                        <td class="col-sm-1">
                                            <a href="#" class="btn btn-danger" ng-click="deleteSpecialfield(specialfield)">
                                                Delete
                                                <span class="fa fa-remove"></span>
                                            </a>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是StorageService.js

var isHtml5Compatible = document.createElement('canvas').getContext != undefined;

if (isHtml5Compatible) {
    initiateLocalStorage();

}

function initiateLocalStorage() {
    // Create the AngularJS app
    var app = angular.module('SpecialFields', ['common']);
    app.config(function ($routeProvider) {
        $routeProvider
        .when('/', {
            controller: 'SpecialFieldsController',
            templateUrl: '/List.html'
        })
        .when('/update', {
            controller: 'SpecialFieldsController',
            templateUrl: '/Update.html'
        })
    });


    // Create the Controller
    app.controller('SpecialFieldsController', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {

        //Read the Sfield List from LocalStorage
        $scope.specialfields = getLocalStorage.getSpecialfields();


        //Count the SpecialFields List
        $scope.count = $scope.specialfields.length;


        //Add Sfield - using AngularJS push to add sfield in the sfield Object
        //Call BindTable_SpecialField to update the locally stored Sfield List
        //Reset the AngularJS SpecialField scope
        //Update the Count
        $scope.addSpecialfield = function () {
            $scope.specialfields.push({'specialfieldname': $scope.specialfieldname, 'specialfieldtype': $scope.specialfieldtype });
            getLocalStorage.BindTable_SpecialField($scope.specialfields);
            //$scope.sfno = '';
            $scope.specialfieldname = '';
            $scope.specialfieldtype = '';
            $scope.count = $scope.specialfields.length;
        };

        //Delete Sfield - Using AngularJS splice to remove the sfield row from the sfield list
        //All the Update sfield to update the locally stored sfield List
        //Update the Count
        $scope.deleteSpecialfield = function (specialfield) {
            $scope.specialfields.splice($scope.specialfields.indexOf(specialfield), 1);
            getLocalStorage.BindTable_SpecialField($scope.specialfields);
            $scope.count = $scope.specialfields.length;
        };
    }]);
}
  

**编辑2:具有类portlet-body的div将具有ng-view指令,并且将成为我的视图的占位符。此div中的所有代码都将移动   要呈现的List.html.another html文件是Update.html   单击“编辑”按钮时呈现的内容。

0 个答案:

没有答案