相关疑难解决方法(0)

具体来说,我想知道他们如何在不使用innerHTML的情况下更新元素.在文档中,他们清楚地说明了它们如何比其他模板引擎更好,因为它们不会使用innerHTML重新渲染(ctrl -f innerHTML - 抱歉).我开始深入研究源代码,但有很多内容,并希望我可以从你们那里得到更快的答案.

到目前为止,我的猜测已经存在

• 编译器会转换{{test}}为<ng-bind>test</ng-bind>链接器在数据更改时可以更新的内容,但是当我查看呈现的Angular页面的DOM时,似乎不会发生这种情况.并且似乎它可能会干扰客户端的CSS和Angular外部的其他JavaScript组件.
• 他们实际上正在使用innerHTML,但他们只是不重新渲染整个DOM - 只是它的一小部分(可能是某种自定义<ng-bind></ng-bind>标记内的数据).
• 他们以某种方式删除并追加新元素...我想是糟糕的猜测.

如果有人知道我喜欢学习.否则它会回到我的源代码中.

编辑新猜猜

在考虑了一些之后,我相信这可能会发生什么:编译器吞下html,比如说

<p> 
  {{model}} 
  <div> 
    <p> Hello ! </p> 
  </div> 
</p>

并将其转换为:

<p class="ng-binding"> 
  {{model}} 
  <div> 
    <p> Hello ! </p> 
  </div> 
</p>

然后Angular可以爬行并索引所有角度文本节点({{model}})eg document.getElementsByClass('ng-binding')[0].childNodes[0].然后,链接器可以将每个存储的节点与范围模型相关联$scope['model'].然后,通过设置node.nodeValue = $scope['somemodel](简化)`和vo技术,没有内部HTML和闪电速度DOM更新,可以非常快速地更新每个节点.

在jQuery中,我可以执行以下操作,在div或任何元素中添加所需的文本.

$( "#div1" ).html( "<span class='red'>Hello <b>Again</b></span>" );

如何使用AngularJS执行类似的操作.

当用户点击链接时,我需要在div中添加纯文本.

这是我尝试过的:

视图:

<a ng-click="showProductText($index)">Click Me</a>

NG-控制器:

$scope.showProductText = function () {
   var myEl = angular.element(document.querySelector('#customerProductCatalogText'));
   --need help hence forth--
    };

我正在关注一个关于在Angular中实现Drag&Drop的很棒的教程,我最初在这个StackOverflow答案中找到了这个链接到作者的博客和GitHub代码.

当我实现它并在我的项目中测试它时,我得到了错误:

[$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: dropped(dragEl, dropEl)

根据Angular Docs,问题在于我引用了一个将DOM对象作为DOM属性中的参数的函数 - 它发生在这一行:

<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, dropEl)'>drop zone</div>

正如您所看到的,该on-drop属性将此dropped函数(在我的控制器中定义)传递给指令lvlDropTarget(在下面发布),该指令调用它来执行用户执行的拖放操作.我喜欢这种设计,因为它使该指令可以在同一个应用程序中重复使用许多不同的拖放可能性.实际上,我只需要在我的控制器中定义一个不同的函数,并通过on-drop属性将它传递给指令.

然而,不幸的是,这似乎被Angular击落了.有没有人有任何其他如何实现相同的设计和功能,但在某种程度上Angular更好吗？

这是lvlDropTarget指令

module.directive('lvlDropTarget', ['$rootScope', 'uuid',
  function ($rootScope, uuid) {
    return {
      restrict: 'A',
      scope: {
        onDrop: '&'
      },
      link: function (scope, el, attrs, controller) {
        var id = angular.element(el).attr("id");
        if (!id) {
          id = uuid.new()
          angular.element(el).attr("id", id);
        }

        el.bind("dragover", function (e) …

样品

请考虑一下Plunkr.

我需要的

我需要能够通过它的id得到一个元素.

示例代码应该能够将css类分配给当前视图中存在的任何DOM元素.

应使用源对象检查,该对象由控制器中的$ scope提供.此源对象可能/将具有比视图上的输入元素更多的属性.

所以我想遍历每个对象键,看看是否存在相应的DOM元素.如果是这样,请验证它的价值.

这个问题

我如何通过id获取元素,仅使用AngularJS(不允许使用jQuery !!)？

特别是对于Plunkr,我需要这个功能(真的)工作:

self.IsFieldCurrentlyActive = function(field){
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return (inputElement != 'undefined');

  // Sample only
  var idx = field.indexOf('Unused');
  return idx == -1;
};

而这一个(基本相同):

self.GetElementByKey = function(key)
{
  // Should be (in pseudocode):
  // var inputElement = angular.find(field);
  // return inputElement;

  // Sample only
  return null;
}

更新

道歉,我忘了添加一个重要的要求:我不能使用任何假定唯一ID的机制,因为可能会出现多次相同形式(以及相同的ID).所以,我需要尊重Angular范围.

谢谢!

我正在尝试使用Angular Material创建一个表单,允许用户选择每页的项目数(从DB加载,或其他).我想让大多数流行的选择(例如10,20,All)始终可见并且只需单击鼠标即可访问,因此没有下拉列表或滑块.但是,我还希望用户可以通过输入字段自由指定自定义值(请参见下图).

我创建了以下JSFiddle:http://jsfiddle.net/p55sx0zy/

但是有一个问题.输入字段无法用鼠标聚焦,而是选择了单选按钮,我需要按下TAB以聚焦输入字段.当我这样做并更改值时,单选按钮将被取消选中.然后,当我再次按下第4个单选按钮时,会报告正确的值.

我希望这个输入可以用鼠标聚焦,单选按钮在输入被修改时保持选中状态.使用Angular材料可以实现这样的设计吗？

所以为了简单起见,我试图用我从ajax调用获得的新项目列表更新我的选择列表.列表中有项目.我将模型设置为新列表并执行$ scope.$ apply().这在firefox中很有用,但在IE中却不行.我究竟做错了什么？我缺少一些IE9的东西吗？(我一直在寻找几个小时,准备放弃).感谢我能得到的所有帮助.

HTML:

<select 
  ng-model="SelectedParameter" 
  ng-options="Parameter.Name for Parameter in AllParameters">
</select>

JS:

$.getJSON("/Cont/GetList", {id: id}, 
  function (result) {
    var allParameters = result.Data.AllParameters;
    $scope.AllParameters = allParameters;
    $scope.$apply();  
  }
);

我只是在学习angularjs并且有一些工作将jQuery和angularjs混合在一起.我知道这不是正确的方法,但我不知道Angularjs正确的做法是什么.

在HTML中我有这个标签,它只是一个将div标签动态添加到页面上的按钮.

<div ng-controller="pgCtrl">
    <button id="new-btn" ng-click="newDiv()">Gimme a div!</button>
</div>

在javascript我有这个:

app.controller('pgCtrl', function($scope){
    $scope.newDiv = function(){
        // Load an element that uses controller anotherCtrl
        $('<div class="blah" ng-controller="anotherCtrl">' +
            '<button id="another-btn" ng-click="stuff()">-</button>{{stuff}}' +
            '</div>').appendTo('body');
        angular.bootstrap($('.blah'), ['app']);
    };
});

我知道这不是使用Angularjs做到这一点的"正确"方法.我混合使用各种基本的jQuery并且它可以工作,但我没有学到任何东西.

我试图在我现有的应用程序中嵌入一个角度应用程序,它广泛使用jquery.我调用bootstrap函数的那一刻,例如

  angular.bootstrap(document.getElementById('app-grid'),['grid']);

我收到一个奇怪的错误:

Error: $rootElement.on is not a function $LocationProvider/this.$get<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:9257
........

如果我成功删除jquery stuff角度app加载.如果有解决方法,请告诉我

jquery: 1.5.1
angularjs:1.2.13

我是Rails开发人员的红宝石，他只是最近才开始学习除jquery之外的javascript技术（Angular和React）。我阅读了其中的一些比较文章，以了解人们为什么使用不同的javascript框架和库，但是我仍然很难弄清它们的重要性（很可能是由于我缺乏对网络工作原理的了解？）。我在使用Angular和React时发现的一件事是，我不需要像以前使用jquery一样单独处理ajax。另外，我似乎确实很欣赏React的语法和组件。

无论如何，请帮助我理解为什么我应该使用Angular或React而不是jQuery。有什么我可以做的事，而另一件事不能做？有些比其他快吗？只是风格和喜好问题吗？

$scope.addNew = function(){    
    $('.thumb-img-gallary').append("<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>");    
}

我正在调用此函数来动态添加元素.但后来delThumbImgGallaryPhoto()没有被召唤.