在运行时选择angularjs视图和控制器

时间:2014-02-27 13:43:00

标签: javascript json angularjs

我正在为各种类型的活动开发管理控制台,如音乐会,婚礼,会议,展览,戏剧等。

此应用程序正在使用角度JS作为前端调用后端JSON服务。

这就是我想要实现的目标

在角度JS视图/控制器中,我想设置一个有三个步骤的向导...... 第1步:使用模型中的公共属性编辑表单(下面json中“eventType”之前的所有内容) 步骤2:根据模型的“eventType”属性加载自定义视图和控制器 步骤3:显示带有事件标题和确认按钮的消息,以将模型JSON发布到后端服务

问题在于流程中的第2步。 我想基本上做这样的事情......

<div id="wizard_step_2" ng-model="$scope.eventData" ng-view="/views/eventtypes/{{$scope.eventType}}Editor.html" ng-controller="{{$scope.eventType}}Controller">
</div>

eventData模型从项类型到项类型不同,我可能需要在作用域上实现特定于eventType的函数,因此需要控制器。

对于视图,我知道这可以通过ng-include和注册控制器来完成,但是我在新控制器中丢失了范围并查看了我需要它来操作父范围上的eventData。

可以这样做,还是我在错误的树上狂奔?

JSON模型

{
    "id": 1234,
    "eventTitle": "Some sample title",
    "eventOrganizer": "John Doe",
    "eventDate": "1/1/2015",
    "eventTime": "02:00:00",
    "eventLocation": {
        "AddressLine1": "43 duck st.",
        "AddressLine2": "",
        "TownCity": "Fakesville",
        "Country": "SampleCountry"
    },
    "eventType": "WEDDING",
    "eventData": {
        "BrideName": "Jane Blogs",
        "GroomName": "John Doe",
        "NumberOfGuests": 300,
        "PhotographerName": "Bill Jones",
        "CatererName": "Joes Fine Foods",
    }
}

{
    "id": 1234,
    "eventTitle": "Some sample title",
    "eventOrganizer": "John Doe",
    "eventDate": "1/1/2015",
    "eventTime": "02:00:00",
    "eventLocation": {
        "AddressLine1": "43 duck st.",
        "AddressLine2": "",
        "TownCity": "Fakesville",
        "Country": "SampleCountry"
    },
    "eventType": "CONCERT",
    "eventData": {
        "ArtistName": "Richer Equestrian",
        "SupportingArtist": "Cooper Planet",
        "Agent": "Steve Black",
        "TicketsOnsale": 300,
        "ArtistGenre": "Rock and Roll",
    }
}

0 个答案:

没有答案