全部,请原谅我,我刚刚开始学习使用angluarjs。我试图在我的自定义指令中实现对模型的双向绑定。但是我不知道为什么它不起作用。请帮忙复习一下。谢谢。
Html
<div ng-controller="childController" >
<div class='col-lg-1'>
<search-Input bind-Model="seachInputResult"/>
</div>
<div class='col-lg-1'>
<button class='btn btn-primary pull-right form-group' type='button' ng-click="create()">create</button>
</div>
</div>
的JavaScript
var app = angular.module('my-app', [], function () {
});
app.controller('childController', function($scope, $element) {
$scope.testModel={text:""};
$scope.elementValues={name:"joe"};
});
app.value('testSource', [{value:"111",text:"111text",type:"a"},
{value:"222",text:"222text",type:"b"},
{value:"333",text:"333text",type:"c"},
{value:"444",text:"444text",type:"d"}]);
app.controller('AppController', function ($scope, $log,testSource) {
$scope.seachInputResult={text:"2222",
value:""
};
$scope.create = function(){
//debugger;
alert($scope.seachInputResult.type);
};
});
app.directive("searchInput",function(testSource){
searchDir = {};
searchDir.restrict="E";
searchDir.replace="true";
searchDir.template="<div class=\"input-group dropdown\">"+
"<input class=\"form-control dropdown-toggle\" data-toggle=\"dropdown\" " +
"autocomplete=\"off\"" +
"ng-model=\"bindModel.text\" ></input>"+
"<span class=\"input-group-addon\">"+
"<i class=\"glyphicon glyphicon-search text-muted\"></i>" +
"</span>" +
"<ul class=\"dropdown-menu\" role=\"menu\">" +
"<li ng-repeat=\"data in elementDefinition.itemDatas\">" +
"<a ng-click=\"selectItem($index)\">" +
"<div ng-bind=\"data.text\" ></div></a></li></ul></div>";
searchDir.scope={
bindModel:'='
};
searchDir.link=function (scope, jqElement, attrs) {
scope.elementDefinition={};
scope.elementDefinition.itemDatas = testSource;
scope.selectItem = function(index){
var value = scope.elementDefinition.itemDatas[index];
scope.bindModel=value;//trying to update the binding model. doesn't work
};
}
return searchDir;
});
该searchInputResult
模型存在AppController
,并且在我的自定义指令中使用了隔离范围。我试图bindModel
在指令范围内使用bind searchInputResult
。并且还想更新该函数中的绑定模型selectItem
。
请参阅jsfiddle中的演示。谢谢。
我明白了,这对你的小提琴是有帮助的:
更改此行以使其起作用:
<search-Input bind-Model="$parent.seachInputResult"/></div>
并更改警报,以便您获得正确的输出:
alert($scope.seachInputResult.text);
seachInputResult
子控制器上的是正确的,但是要实现双向绑定,您需要与父控制器进行通信。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句