AngularJS - 创建一个使用NG-模型和MD-自动完成指令 [英] AngularJS - Create a directive that uses ng-model and md-autocomplete

问题描述

我试图创建 MD-自动完成指令。我试着用了答案由<一个提供href=\"http://stackoverflow.com/questions/14115701/angularjs-create-a-directive-that-uses-ng-model\">AngularJS - 创建一个使用NG-模型的指令，但它并没有为我工作

I am trying to create a directive for md-autocomplete. I tried using the answer provide by AngularJS - Create a directive that uses ng-model, but it does not work for me.

我的codePEN是在这里：的http：// codepen.io / colbroth /笔/ QyMaQX /？编辑= 101 。

My CodePen is here: http://codepen.io/colbroth/pen/QyMaQX/?editors=101.

在code是基于角料为演示自动完成在 https：//开头材料.angularjs.org /最新/演示/自动完成。我有多个页面，这就需要一个自动完成字段选择的状态。我不想重复code语言为每个网页组件。

The code is based on the Angular material demo for autocomplete at https://material.angularjs.org/latest/demo/autocomplete. I have multiple pages, which need an autocomplete field to select a state. I do not want to repeat the code for each web page component.

国家指令需要一个 MD-自动完成输入，我需要 demoCtrl.selected 状态，以反映在两种情况下相同的值。但是，当我更新输入元素，在国家指令没有反映这一点，反之亦然。

state-directive takes an md-autocomplete input, I need demoCtrl.selected state to reflect the same value in both cases. But when I update the input element, the state-directive does not reflect this and vice versa.

＆LT;输入NG模型=demoCtrl.selectedState＆GT;

＆LT;国家指令NG模型=demoCtrl.selectedState＆GT; ...＆LT; /国家指令＆GT;

推荐答案

您是在正确的轨道上。你的问题是，你的模型是一个字符串 - 一种原始的JavaScript，但一个 ngModel 总是需要有一个对象，如果你想避免这类问题

You are on the right track. Your problem is that your model is a string - a primitive in javascript but a ngModel always needs to be an object if you want to avoid these kind of problems.

继承范围通常是简单的，你经常甚至不需要知道它正在发生......直到你尝试2路数据绑定（即表单元素，NG-模型）为原始（例如，数，字符串，布尔）从孩子域内父范围界定。它不工作的方式大多数人期望它应该工作。什么情况是，孩子得到的范围自有物业，隐藏/阴影的同名parent属性。这不是AngularJS做 - 这是原型继承如何JavaScript的工作。新AngularJS开发商往往没有意识到NG重复，NG-开关，NG-查看和NG-包括所有创造新的子范围，所以问题往往显示出来时，这些指令都参与其中。 （见这个例子对这个问题的一个快速说明。）

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)

这与原语问题可以通过以下的最佳做法总有一种很容易地避免。在NG-车型。

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

网站还链接了这的YouTube视频 - 3精心投入的时间分钟

Taken from Understanding-Scopes It also links to this Youtube video - 3 minutes of well invested time

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

固定codePEN

这篇关于AngularJS - 创建一个使用NG-模型和MD-自动完成指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！