Question

我创建了一个plink来说明我的问题： http://plnkr.co/edit/qwxXzIgBdb3C8MH4FleG?p=preview

我有一个指令和一个控制器。我想将控制器中的用户列表发送到指令。没有问题。

app.controller('Controller',['$scope', function($scope){
  $scope.users = [
    {name:'Jason', id:'1'}, 
    {name:'Kris', id:'2'},
    {name: 'John', id:'3'}
    ];

  $scope.activeUser = $scope.users[0];
}]);

app.directive('myDirective', function (){
  return {
    restrict: 'E',
    scope: {
      people: '=',
      selectedUser:'=',
    },
    templateUrl:'directive.html'
  };
});

在我的index.html中，我将用户绑定到people，将activeUser绑定到selectedUser。

 <my-directive people="users" selectedUser="activeUser"></my-directive>

在指令内部是一个下拉选择框，您可以在其中选择用户。我将select标签的模型绑定到selectedUser，从而绑定到activUser（或者至少是我的理解。它没有那么清楚，我错过了什么）。

<select ng-options="person.name for person in people" ng-model='selectedUser'>

当我从下拉列表中选择某人时，我希望看到更改反映在activeUser变量中的指令之外，如下所示：

<my-directive people="users" selectedUser="activeUser"></my-directive>

      <p>outside of the directive:</p>
      {{activeUser}}

但这并没有发生。为什么不？

P.S。我想使用ng-change来启动对数据库的http调用，因此我不能将其用作解决方法。更重要的是，我真的应该工作，我想了解它为什么没有。

感谢您的帮助！

Answer 1

看起来该指令本身存在问题，这会阻止双向数据绑定：

当前

<my-directive people="users" selectedUser="activeUser"></my-directive>

<强>预期

<my-directive people="users" selected-user="activeUser"></my-directive>

请注意上面第一个指令中缺少的短划线（-）。因此，来自控制器的数据未被传递给指令，这意味着没有双向绑定。当我们意识到指令本身（文本输入字段和选择字段）不是默认为Jason时，即使他是传入的活动用户，这一点更加明显。

更新了plunker：http://plnkr.co/edit/RcziLDlBneT4bjqD5BPJ

希望这有帮助！

Answer 2

经过大量梳理后，我发现了问题。我认为，这显然是最优雅的解决方案。感谢您的帮助Lux！

<my-directive people="users" selected-user="activeUser"></my-directive>

注意＆＃39;选定用户＆＃39;而不是选择用户＆＃39;我在最初的plink中有过。

http://plnkr.co/edit/dSVYj9zwK7YlS4gavgPE?p=preview

指令和控制器之间的2路数据绑定失败。为什么呢？

2 个答案: