Angularjs - data binding not working with controller

Question

I am developing an app that uses bootstrap (v3.2.0) with angularjs (v1.2.26), I want to create a set of columns that are changable via a dropdown.

I have got the dropdown data binding ok, but I am failing to change the bootstrap responsive column classes when the user selects a different number of columns in the dropdown.

This fiddle shows my code so far.

The html...

<div data-ng-app="">
    <div class="container-fluid">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">   <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

                    </button>   <span class="navbar-brand navbar-collapse-header">Header</span>

                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li data-ng-controller="ColumnController" id="columnDropDown" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Columns: {{columnLayout.value}} <span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">
                                <li data-ng-repeat="layout in columnLayouts">   <a data-ng-click="changeLayout(event)" href="#" class="portlet-column-number">{{layout.text}}</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <div class="row">
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 1</div>
                <div class="panel-body">More content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 2</div>
                <div class="panel-body">Some other content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 3</div>
                <div class="panel-body">Some content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
    </div>
</div>

and js...

function ColumnController($scope) {
    $scope.columnLayouts = [{
        value: 3,
        text: "Reset",
        layoutClass: "col-sm-6 col-md-4"
    }, {
        value: 1,
        text: "1",
        layoutClass: "col-sm-12"
    }, {
        value: 2,
        text: "2",
        layoutClass: "col-sm-6"
    }, {
        value: 3,
        text: "3",
        layoutClass: "col-sm-4"
    }];
    $scope.changeLayout = function () {
        $scope.columnLayout = this.layout;
    }
    $scope.getLayoutClass = function(){
        return $scope.columnLayout.layoutClass;
    }
    $scope.columnLayout = $scope.columnLayouts[0];
}

UPDATE:

Ok so it turns out that I should have only added the 'ColumnController' to one element and in this case that element works best as the wrapper for all other elements.

However, I think to further improve this i will probably create a separate controller for navigation and then broadcast messages about change, in this case I could have the ColumnController listen for messages about column changes and repsond to them to change the model driving the column layout.

Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else — Daniel Cheung
– Daniel Cheung, Commented Oct 12, 2014 at 10:11

dfsq · Accepted Answer · 2014-10-07 16:19:20Z

2

The problem is that you put too many data-ng-controller="ColumnController". You don't need to add it to every tag where you use angular binding {{}} or ngRepeat. You need only one on the wrapping container. For example:

<div data-ng-app="" data-ng-controller="ColumnController">
    ...
</div>

Demo: http://jsfiddle.net/pykm0tkv/25/

answered Oct 7, 2014 at 16:19

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs - data binding not working with controller

1 Answer 1

Demo: http://jsfiddle.net/pykm0tkv/25/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://jsfiddle.net/pykm0tkv/25/

Comments

Your Answer

Sign up or log in

Post as a guest

Related