Question

我已经创建了一个下拉列表，如果从下拉列表中选择了一个新值，我想更新文本框。

即。所以如果选择了电影 - 然后显示＆＃34;电影搜索＆＃34;在文本框中如果选择了游戏 - 则在文本框中显示＆＃34;游戏搜索

到目前为止，当selectedItem属性更新时，我的代码不会触发我的指令。该指令本身调用一个服务方法来返回文本框的所需文本。

var myAppmodule = angular.module('myApp', []);

myAppmodule.directive("updateTextDependingOnSelectedItem", function () {

return {
    link: function (scope, element, attrs) {
        scope.$watch("selectedItem", function (newValue) {
            angular.element(element).val(scope.mainSearchTextBoxMessage(newValue));
        });

    }

};
});

**Service**
 var mainSearchServices = function(object) {

 return {

    dropdownsearchitems: function () {   // passsing depencies to a factory
      return object.items;
  },
    mainSearchTextBoxMessage: function(selectedItem) {

      // create a swicth statement that returns correct message, make this follow OCP
      return "Select Title"
    }
}
};

**HTML**
<div id="MainPageHeader" ng-controller="mainSearch">
                <img src="~/Content/Images/Logo.png" alt="Image" />
                <div id="loginLinks">
                    sign in / register
                </div>
            <select data-ng-model="selectedItem" data-ng-options="item for item in 
      DropDownItems" class="itemTypesDropDownList">                             
                </select>
                <input type="text" id="headerSearch" 
     update-textdependingonselecteditem="selectedItem" />
                <input type="button" class="searchButton" value="Search" />
            </div>

如何更新模型中的属性时触发指令？ angularjs

0 个答案: