Как сделать частичные виды с помощью Angular?

Question

Как сделать частичные виды с помощью Angular?

0

У меня есть следующая конфигурация маршрута:

var Company;
(function (Company) {
    var HomeConfig = (function () {
        function HomeConfig($stateProvider, $urlRouterProvider) {
            this.$stateProvider = $stateProvider;
            this.$urlRouterProvider = $urlRouterProvider;
            this.$urlRouterProvider.otherwise('/welcome');
            this.$stateProvider
            .state('welcome', {
                url: '/welcome',
                template: function () {
                    return $("#welcome").html();
                }
            })
                .state('employee', {
                    url: '/employee',
                    views: {
                        '': {
                            template: function () {
                                return $("#employee").html();
                            },
                            controller: 'employeeController',
                            controllerAs: 'viewModel'
                        }

                    }
                })
                .state('success', {
                    url: '/success?firstName&lastName&gender&salary&phoneNumber',
                    template: function () {
                        return $('#success').html();
                    },
                    controller: 'successEmployeeRegisterController',
                    controllerAs: 'viewModel',
                    params: {
                        firstName: { value: "", squash: true },
                        lastName: { value: "", squash: true },
                        gender: { value: "", squash: true },
                        salary: { value: "", squash: true },
                        phoneNumber: { value: "", squash: true }
                    }
                })

                .state('department', {
                    url: '/department',
                    template: function () {
                        return $("#department").html();
                    },
                    controller: 'departmentController',
                    controllerAs: 'viewModel'
                });
        }
        HomeConfig.$inject = [
            '$stateProvider',
            '$urlRouterProvider'
        ];
        return HomeConfig;
    })();
    Company.HomeConfig = HomeConfig;
})(Company || (Company = {}));

Частичный вид ListEmployee выглядит следующим образом:

<md-content class="overview" flex="100" layout-xs="column" layout-gt-xs="row">
    <div flex-gt-xs="33" ng-repeat="employee in viewModel.employees track by employee.id">
        <div layout="row" flex-gt-xs="90">
            <md-card>
                <md-card-header>
                    <md-card-header-text layout="column">
                        <span class="md-title">
                            {{employee.fullName}}
                        </span>
                    </md-card-header-text>
                </md-card-header>
                <img ng-src="~/Images/profile.svg" style="height:130px ; width:180px" class="md-card-image" alt="Washed Out">
                <md-card-title>
                    <md-card-title-text>
                        <p>
                            Salary: {{employee.salary}}
                        </p>
                        <p>
                            Gender:   {{employee.gender}}
                        </p>
                        <p>
                            Phone Number:   {{employee.phoneNumber}}
                        </p>
                        <p>
                            Department:   {{employee.department.name}}
                        </p>
                    </md-card-title-text>
                </md-card-title>
                <md-card-content>
                </md-card-content>
                <md-card-actions layout="row" layout-align="end center">
                    <md-button ng-click="viewModel.edit(employee.id)">Edit</md-button>
                    <md-button ng-click="viewModel.delete(employee.id)">Delete</md-button>
                </md-card-actions>
            </md-card>
            <md-card>
        </div>
    </div>
</md-content>

Как я могу визуализировать этот вид в индексе с помощью углового? Что-то вроде этого, но не с mvc, с угловыми директивами или чем-то

  <script type="text/ng-template" id="employee">
        @Html.Partial("~/Views/Home/EmployeePartialViews/AddEmployee.cshtml");
        @Html.Partial("~/Views/Home/EmployeePartialViews/ListEmployee.cshtml");
    </script>

Ioan Adrian Duliba 28 май 2016, в 20:02

Источник

1

Почему jquery в вашем шаблоне конфигурации? Я бы просто использовал templateurl и указал путь к вашему HTML-шаблону.
Noppey 28 май 2016, в 17:53

Теги:

c#

javascript

angularjs

.net

routing

1 ответ

Ещё вопросы

Почему jquery в вашем шаблоне конфигурации? Я бы просто использовал templateurl и указал путь к вашему HTML-шаблону.

charlietfl · Answer 1 · 2016-05-28T16-36-00.000Z

Если вы поместите html в <script> как показано, вы используете templateUrl для соответствия идентификатору тега сценария

JS

  .state('welcome', {
            url: '/welcome',
            templateUrl: 'employee.html'
   })

HTML

<script type="text/ng-template" id="employee.html">

Это же соглашение для директив.

Если не существует соответствующего тега скрипта, тогда для сервера создается запрос ajax для получения шаблона

Я пытаюсь так, но это не работает ни <script type = "text / ng-template" id = "employee"> <div ng-include src = "'~ / Views / Home / EmployeePartialViews / AddEmployee.cshtml'" > </ div> </ script> @charlietfl
Нужно удалить бритву ~ которая не действует в браузере
<script type = "text / ng-template" id = "employee"> <div ng-include src = "Views / Home / EmployeePartialViews / AddEmployee.cshtml '"> </ div> </ script> Результатов нет, не не работает @charlietfl
Зачем вам нужно ng-include в шаблоне скрипта в первую очередь? может просто указать templateUrl на этот путь. Также проверьте сеть инструментов разработчика broswer, чтобы увидеть, успешен ли запрос шаблона или нет