angularjs - 在angularjs中绑定输入并使模型在整个应用程序中保持不变

Question

只想让用户能够从整个应用程序屏幕的多个点进行搜索。

如何持久化模型？

搜索的 HTML 如下：

        <input 
            style="width:80%"
            ng-model="searchKeyword"
            id="search" 
            size="70" 
            type="search" 
            results="5" 
            placeholder="symptôme, maladie, etc." 
        />

此代码片段位于多个位置，包括一些部分。目前，听起来在其中之一中输入的值并非在所有形式中都存在。

[编辑] searchKeyword 属于控制器范围。

[编辑 2] 这是一个小提琴，它演示了我想在我的应用程序中发生的上下文中解决的问题：http: //jsfiddle.net/stephanedeluca/abHFQ/

任何想法？

Answer 1

您可以使用自定义指令。 演示更新

代码种子js：

app.directive("search", function(){

  var search = {
    keyword : ""
  }

  return {

    restrict : "EA",

    scope: {},

    template : '<input \
            style="width:80%" \
            ng-model="search.keyword" \
            size="70" \
            type="search" \
            results="5" \
            placeholder="symptôme, maladie, etc." \
        />',

    link : function(scope, element, attrs){
      scope.search = search;
    }


  }
});

更新

要在控制器中使用关键字 - 只需将其存储为value.

app.controller('MainCtrl', function($scope, searchVal) {
  $scope.search = searchVal;
});

app.value("searchVal", {
  keyword : "I am in controller - no problem!"
})

app.directive("searchDir", function(searchVal){

  return {

    restrict : "EA",

    scope: {},

    template : '<input \
            style="width:80%" \
            ng-model="search.keyword" \
            size="70" \
            type="search" \
            results="5" \
            placeholder="symptôme, maladie, etc." \
        />',

    link : function(scope, element, attrs){
      scope.search = searchVal;
    }

  }

});