Angularjs-数据绑定无法与控制器一起工作
Angularjs - data binding not working with controller
我正在开发一个使用angularjs(v1.2.26)的bootstrap(v3.2.0)的应用程序,我想创建一组可以通过下拉菜单更改的列。
我已经确定了下拉列表数据绑定,但当用户在下拉列表中选择不同数量的列时,我无法更改引导响应列类。
到目前为止,这把小提琴显示了我的代码。
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>
和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];
}
更新:
好的,所以事实证明,我应该只向一个元素添加"ColumnController",在这种情况下,该元素最适合作为所有其他元素的包装器。
然而,我认为为了进一步改进这一点,我可能会创建一个单独的导航控制器,然后广播有关更改的消息,在这种情况下,我可以让ColumnController
侦听有关列更改的消息并重新发送给它们,以更改驱动列布局的模型。
问题是您放置了太多的data-ng-controller="ColumnController"
。您不需要将其添加到使用角度绑定{{}}
或ngRepeat
的每个标记中。包装容器上只需要一个。例如:
<div data-ng-app="" data-ng-controller="ColumnController">
...
</div>
演示:http://jsfiddle.net/pykm0tkv/25/
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 转义符不能与innerHTML一起使用
- 从控制器返回后Ajax启动事件激发
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- 如何在单击复选框后调用控制器方法
- 在控制器和数据对象之间同步数据
- 将Javascript数组发送到控制器ASP.NET MVC
- 角度控制器结构
- 如何使Angular JS控制器与指令一起工作
- 如何将 ng-show 与控制器中返回 true/false 的函数一起使用
- Angularjs-数据绑定无法与控制器一起工作
- 控制器如何在Extjs应用程序中与MVC一起使用
- Typeahaed.js不能与WebApi控制器一起工作
- AJAX调用不能与控制器动作一起工作
- 将控制器和指令的交互方式捆绑在一起
- 调整客户端图像的大小,并将其与表单数据一起传递给asp MVC控制器
- RESTful API 未与简单的 AngularJS 控制器一起显示
- Web API控制器下载csv,但不能与jQuery一起工作
- Angularjs的路由不能使用IIF函数与控制器和模型一起工作