Question

全部，原谅我，我刚开始学习使用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绑定searchInputResult。并且还想在函数selectItem中更新绑定模型。

请参阅jsfiddle中的演示。感谢。

Answer 1

我得到了你的fiddle：

更改此行以使其正常工作：

<search-Input bind-Model="$parent.seachInputResult"/></div>

并更改警报，以便获得正确的输出：

alert($scope.seachInputResult.text);

seachInputResult在子控制器上是正确的，但为了实现双向绑定，您需要与父控制器进行通信。

自定义指令两种方式绑定不起作用

1 个答案: