AngularJS - 创建一个使用 ng-model 和 md-autocomplete 的指令答案

【问题标题】：AngularJS - Create a directive that uses ng-model and md-autocompleteAngularJS - 创建一个使用 ng-model 和 md-autocomplete 的指令
【发布时间】：2016-04-20 00:10:28
【问题描述】：

我正在尝试为md-autocomplete 创建一个指令。我尝试使用AngularJS - Create a directive that uses ng-model 提供的答案，但它对我不起作用。

我的 CodePen 在这里：http://codepen.io/colbroth/pen/QyMaQX/?editors=101。

代码基于https://material.angularjs.org/latest/demo/autocomplete 的自动完成 Angular 材料演示。我有多个页面，需要一个自动完成字段来选择一个状态。我不想为每个网页组件重复代码。

state-directive 接受md-autocomplete 输入，我需要demoCtrl.selected 状态来反映两种情况下的相同值。但是当我更新输入元素时，state-directive 不会反映这一点，反之亦然。

<input ng-model="demoCtrl.selectedState">

<state-directive ng-model="demoCtrl.selectedState">...</state-directive>

【问题讨论】：

请在此处发布代码。

标签： javascript angularjs directive angular-material md-autocomplete

【解决方案1】：

你在正确的轨道上。您的问题是您的模型是一个字符串 - javascript 中的原语，但如果您想避免此类问题，ngModel 始终需要是一个对象。

范围继承通常很简单，而且您通常甚至不需要知道它正在发生...直到您尝试将 2 路数据绑定（即，表单元素，ng-model）到基元（例如，数字, string, boolean) 从子作用域内定义在父作用域上。它不像大多数人期望的那样工作。发生的情况是子作用域获得了自己的属性，该属性隐藏/隐藏了同名的父属性。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作方式。新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、ng-view 和 ng-include 都会创建新的子作用域，因此当涉及到这些指令时，问题通常会出现。（有关问题的快速说明，请参阅此示例。）

遵循始终使用 '.' 的“最佳实践”，可以轻松避免原语的这个问题。在你的 ng 模型中。

取自Understanding-Scopes 它还链接到this Youtube 视频 - 3 分钟的投入时间

  function DemoCtrl() {
    var self = this;
    self.state = {
      selected: "Maine"
    };
  }

Fixed codepen

【讨论】：