Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

radio icon doesn't get displayed when used in an angular ui-router view #139

Closed
skebanga opened this Issue · 2 comments

3 participants

@skebanga

I am using flat-ui in an angular app which uses ui-router

I have the exact same html for displaying a radio button in index.html and in template.html.

The radio inside the ui-router ui-view doesn't display the circular radio icon when initially loaded:

image

When I click on the radio the selected icon is correctly displayed:

image

When I click on the other radio, both icons are now correctly displayed:

image

The html for the radios is exactly the same:

In index.html I display the radio, and then have a ui-view directive to load the ui-router

<body ng-app="myApp">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <b>index.html:</b>
                <label class="radio">
                    <input type="radio" name="radio1" ng-model="radio1.value" value="option1" data-toggle="radio">
                    Option 1
                </label>
                <label class="radio">
                    <input type="radio" name="radio1" ng-model="radio1.value" value="option2" data-toggle="radio">
                    Option 2
                </label>
                <pre>
radio1 value: {{radio1.value}}
                </pre>
            </div>
        </div>
    </div>
    <div class="container" ui-view></div>

In template.html I display just the radio:

<div class="row">
    <div class="col-md-12">
        <b>template.html:</b>
        <label class="radio">
            <input type="radio" name="radio2" ng-model="radio2.value" value="option1" data-toggle="radio">
            Option 1
        </label>
        <label class="radio">
            <input type="radio" name="radio2" ng-model="radio2.value" value="option2" data-toggle="radio">
            Option 2
        </label>
        <pre>
radio2 value: {{radio2.value}}
        </pre>
    </div>
</div>

The ui-router is configured as per normal:

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'partials/template'
        })
});

I am really hoping someone has some insight into what is going on here?!

@grantgeorge

Sadly, "out of the box" a few of the components do not work.

designmodo/Flat-UI-Pro-Support#325

There are some directives people have made for radio boxes:

https://gist.github.com/andreiavram/149c2f150a501db2276c

https://gist.github.com/petehamilton/5993366

@andrew-ml
Collaborator

Hi, everyone,
we've rewritten checkbox/radio component, please check it out.

@andrew-ml andrew-ml closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.