ng-model 的角度范围答案

【问题标题】：scope of ng-model in angularng-model 的角度范围
【发布时间】：2014-02-14 07:58:44
【问题描述】：

这是html部分...

<body ng-controller="homeController">
<div id="happyValentines" ng-model="myText"> {{ myText }}

我不明白为什么会这样......

$scope.myText = "fksdm kdsmfk msldfkm kdfm ksdmf lsmdflm ";
$scope.changeHeight = function(elem) {
var body = document.body;
var height = 0;
var right = 0;
var opacity = 0; ...

但这并不...

$scope.changeHeight = function(elem) {
  var body = document.body;
  var height = 0;
  var right = 0;
  var opacity = 0;
  body.style.opacity = 0;
  var index = 0;
  var str = "fksdm kdsmfk msldfkm kdfmksdmf lsmdflm ";
  function frame() {
    index += 2;
    $scope.myText = str.substr(0, index);
    height += 4;
    if (right < 60) { 
      right += 1;
      elem.style.marginRight = right + "px";
    }
    opacity += .01;
    elem.style.height = height + "px";
    elem.style.opacity = opacity;
    body.style.opacity = opacity;
    if (opacity >= 1) {
      clearInterval(id);
    $scope.addButtons();
    // document.createElement....
    }
  }
    var id = setInterval(frame, 30);
  }

我对 Angular 很陌生，想知道这背后的 Angular 构造是什么，或者为什么会这样。

【问题讨论】：

您没有在第二个中为 myText 分配值，因为它是在从未调用过的函数 frame() 中定义的。
如果您的 changeHeight 函数被调用，然后在该函数中您调用 frame()，它应该可以工作，但是您没有在那里显示所有代码，所以我们不知道您是否正在调用它们与否。

标签： javascript angularjs angularjs-scope angular-ngmodel

【解决方案1】：

在第二个代码中，您声明了函数“changeHeight”，并在其中设置了“myText”的值。但是在页面上您没有调用“changeHeight”函数，因此它不会调用该函数并且不会设置“mytext”的值。尝试使用 ng-init 或 ng-click 或 ng-change a/c 在页面上调用函数“changeHeight”。

【讨论】：

【解决方案2】：

首先：ng-model主要用于表单元素，基本上是使用onchange事件从表单获取值到模型和$watch从模型获取值到模型的豪华版表单元素。您不需要它只是为了在屏幕上显示一个值。

第二：您不应该修改控制器中的文档或 DOM。这是指令的责任（或者如果是文档元素修改，则可能是服务）。

关于您的第二个代码块，我不明白为什么您在 changeHeight 方法中有一个“function frame()”。并且代码是不完整的，并且您从未真正调用设置$scope.myText 的frame() 方法。

请提供完整代码以获得更好的帮助。

【讨论】：

我更新了框架函数以显示更多我正在做的事情。它基本上是一个动画。为什么不在控制器中修改 DOM？我会查找指令。谢谢，如果您对我正在尝试做的事情有任何建议，请告诉我。
因为这不是控制器的责任。控制器基本上只是视图和模型之间的粘合剂。它不会改变视图的外观，它只是为其提供内容并对事件做出反应，以便您可以更新模型。指令更多地用于修改 DOM。我不确定您要对动画做什么，但我认为您可以使用“ngAnimation”并使用现有指令（如“ngShow”、“ngHide”、“ngIf”等）来解决它。