Javascript 角度UI选择UI未在选择时更新模型？

我想为select ui创建一个包装器，因为我的项目将从同一个位置加载，所以我将把它放在一个指令中，而不是放在我的整个站点上，另外，因为我在所有位置使用相同的控件，如果我们将来更新它，我只想在一个位置更新它

我已经构建了一个包装器，但是由于某些原因，select中的值没有被更新

下面是一个plunkr，带有示例代码

要使用ui，只需选择do即可

<div dropdown-select ng-model="input"></div>

编辑：

也许我没有说清楚，但我想在名为dropdownselect的包装器指令上使用ng模型。使用此下拉选择时，我不希望必须使用相同的范围变量名称

例如，如果我对输入使用ng模型，我可以

<input ng-model="input1" />
<input ng-model="myVarName" />
<input ng-model="somethingDifferent" />

以上三个示例都可以使用，并且每个示例都可以保存输入中的值

现在，我希望能够对我使用的wrapper指令执行相同的操作，就像您可以对输入和其他控件上的ng模型执行的操作一样

所以我应该能做到

<div dropdown-select ng-model="input1"></div>
<div dropdown-select ng-model="myItem"></div>
<div dropdown-select ng-model="whateverIWant"></div>

现在，一旦选择了值，选择ui应该将所选项目填充到这些范围变量中

这是一个包含两个下拉选择包装实例的plunkr，当选择select ui值时，它们都不显示所选值

这就是解决方案

修正你的JS

     angular.module('dgUi', ['ui.select', 'ngSanitize'])

        .config(['uiSelectConfig', function(uiSelectConfig){
          uiSelectConfig.theme = 'bootstrap';
        }])

        .controller('BaseController', ['$scope', function($scope) {
          // changed here to use $scope.data instead of $scope.input
          $scope.data = {"results":{
              id:0, 
              name:'item0'}
          };
        }])

        .controller('DropdownSelectController', ['$scope', function ($scope) {
          $scope.items = [];

          $scope.refresh = function (text) {
                $scope.items = [];

                for (var i = 0; i < 100; i++) {
                  $scope.items.push({id: i, name: 'item ' + i});
                }
          };
        }])

        .directive('dropdownSelect', function () {
            'use strict';

        // do not want to change ng-model="input.name" to anything else as
        // this should be a directive and cannot be changed

            return {
                restrict: 'A',
                scope: false,
                controller: 'DropdownSelectController',
                template: '{{data.results}}<ui-select ng-model="data.results">' +
                               '<ui-select-match placeholder="Enter an address...">{{$select.selected.name}}</ui-select-match>' +
                               '<ui-select-choices repeat="item in items track by $index"' +
                               '    refresh="refresh($select.search)"' +
                               '    refresh-delay="0">' +
                               '   <div ng-bind-html="item.name | highlight: $select.search"></div>' +
                               '</ui-select-choices>' +
                           '</ui-select>',
                link: function (scope, element, attrs, ctrl) {

                }
            }
        });

angular.module（'dgUi'，['ui.select'，'ngSanitize']））
.config（['uiSelectConfig'，函数（uiSelectConfig）{
uiSelectConfig.theme='bootstrap'；
}])
.controller（'BaseController'，['$scope'，函数（$scope）{
//此处更改为使用$scope.data而不是$scope.input
$scope.data={“结果”：{
id:0，
名称：'item0'}
};
}])
.controller（'DropdownSelectController'，['$scope'，函数（$scope）{
$scope.items=[]；
$scope.refresh=函数（文本）{
$scope.items=[]；
对于（变量i=0；i<100；i++）{
$scope.items.push（{id:i，name:'item'+i}）；
}
};
}])
.指令（'dropdownSelect'，函数（）{
"严格使用",；
//不想将ng model=“input.name”更改为其他任何内容
//这应该是一个指令，不能更改
返回{
限制：“A”，
范围：假，
控制器：“DropdownSelectController”，
模板：“{data.results}”+
“{{$select.selected.name}”+
'' +
'   ' +
'' +
'',
链接：函数（范围、元素、属性、ctrl）{
}
}
});

您的HTML将

value in $scope.input: {{ data.results }}

<div class="form-group" style="width:300px">
  <label>select an item</label>

  <!-- changed here to show data -->
  <div dropdown-select ></div>
</div>

$scope.input中的值：{{data.results} 选择一个项目 工作示例：

---

尝试将.id添加到指令模板中的ng模型属性中。（您可以使用任何其他键，如.data）

模板：'+..

如果要在控制器中设置初始值，必须添加如下内容：

$scope.input={“id”：{“id”：2，“name”：“item 2”}

其中，第一个id密钥是ng模型中使用的密钥

对我来说，是元素没有更新文本，我这样使用它：

$timeout(function () {
    $('#ownerdetail').trigger("create");
    $('#selectdcontact').selectmenu().selectmenu('refresh'); //This solves it
    $('#selectdcust').selectmenu().selectmenu('refresh'); //This solves it
  });

如果ng模型的名称等于input，则此操作有效。但是，如果我将index.html页面更改为使用ng model=“data”，并设置$scope.data而不是$scope.input，它将不起作用，这应该不是问题。确保您在“BaseController”中更改了$scope.input。不，不起作用。将index.html更改为ng model=“data”，将baseController更改为$scope.data=。现在不工作了不，我没有。这是一个指令，请参见注释。它不应该改变。如果我传入一个称为输入的模型，另一个称为数据，会怎么样？你的app.js中的第37行仍然有变量“input”而不是“data”。。。无论如何我已经更新了另一个Plunker看看