相关疑难解决方法(0)

使用jQuery设置输入值后更新Angular模型

我有这个简单的场景:

输入元素,其值由jQuery的val()方法更改.

我试图用jQuery设置的值更新角度模型.我试着编写一个简单的指令,但它并没有按照我的意愿行事.

这是指令:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})
Run Code Online (Sandbox Code Playgroud)

这是jQuery的一部分:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})
Run Code Online (Sandbox Code Playgroud)

和HTML:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>
Run Code Online (Sandbox Code Playgroud)

这是我尝试的小提琴:http:
//jsfiddle.net/U3pVM/743/

有人可以指点我正确的方向吗?

jquery bind directive angularjs

156
推荐指数
6
解决办法
17万
查看次数

112
推荐指数
5
解决办法
8万
查看次数

Angular.js和ASP.NET MVC 4

我有一个ASP.NET MVC 4项目,我一直坚持使用Angular.js或Knock.js的JavaScript框架或库的架构决策.我目前倾向于使用Angular.js而不是Knockout.js,但是我不想在项目开发过程中发现我犯了一个错误.

这是一些背景:

  • 我们需要双向模型数据绑定
  • 我们需要能够测试视图.我希望能够进行端到端的单元测试.此外,我们正在使用持续集成.
  • "保存更改"功能.即,如果用户在页面上进行更改,我们需要能够检测到任何更改并提示用户在离开页面之前保存更改
  • "通知"功能.即用户将在大约8小时内登录,并且需要通知并更新其他用户所做的更改(错误,数据状态更改等)
  • 我们需要"未来证明"我们的申请.目前业务部门还没有决定是否需要支持移动设备,但我知道这只是时间问题.
  • 我们的团队由从初级到高级开发人员的不同经验水平的开发人员组成.
  • 目前我们的模型很复杂,可能会更加复杂
  • 我们还需要考虑RAD,代码重用和可维护性

我已阅读优秀的答案在这里,看着斯科特·艾伦的采访时谈到角在这里

由于我们无法从当前的ASP.NET MVC 4体系结构更改为在Web服务器端使用某些内容,因此我尝试使用MVC 4实现Angular.js时会遇到一些问题.这会导致我们有两个模型服务器和客户端上的服务器?

我不是在寻找关于Angular和Knockout的"哪个更好"的讨论,因为我认为它们都有它们的优点和缺点.我正在寻找在ASP.NET MVC 4应用程序中实现JavaScript框架或库的实际代码.我需要一个解决方案,我可以用2年多的时间来生活:)

任何想法或建议?也许答案不是Knock或Angular,而是其他一些JavaScript框架?

javascript javascript-framework asp.net-mvc-4 angularjs knockout.js

73
推荐指数
3
解决办法
4万
查看次数

AngularJS:点击"一个好习惯"吗?为什么AngularJS中没有ng- {event}?

我刚刚开始学习AngularJS并且与AngularJS的一些概念斗争.如果有人可以向我解释一些问题,那就太好了......

  1. 据我所知,这ng-click在技​​术上并不相同onclick(见这里),但两者都放在标记中.我认为这将是一个"不好的做法"?如果大多数人说这是"坏",为什么这是AngularJS的核心概念之一?我认为最好从JavaScript中选择DOM元素,而不是在标记中放置逻辑.

  2. 如果ng-click是对AngularJS中的点击事件做出反应的正确方法,我应该如何处理其他DOM事件?我看到有其他几个指令ng-mouseover,但并非所有DOM事件都有一个AngularJS等价物.我如何处理AngularJS中的'drop'事件(因此采用AngularJS方式 - 不是正常方式)?要明确:我想将文件拖到我的webapp中.

非常感谢Pipo

dom-events angularjs

58
推荐指数
2
解决办法
2万
查看次数

Angular2 innerHtml绑定删除样式属性

我的问题,当我使用innererHtml绑定时 - angular2删除所有样式属性.这对我来说很重要,因为在我的任务中 - html是在服务器端生成的,具有所有样式.例:

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
  `,
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = 'Angular2'
    this.html = "<span style=\"color:red;\">1234</span>";
  }
}
Run Code Online (Sandbox Code Playgroud)

但是在DOM中我只看到1234而且这个文本不是红色的.

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

谢谢!

styles angular

55
推荐指数
3
解决办法
4万
查看次数

在AngularJS中使用$ timeout而不是window.setTimeout有什么好处?

我有一个建议实现这样的超时:

  $timeout(function() {

    // Loadind done here - Show message for 3 more seconds.
    $timeout(function() {
      $scope.showMessage = false;
    }, 3000);

  }, 2000);
};
Run Code Online (Sandbox Code Playgroud)

有人可以告诉我使用它而不是使用setTimeout的原因/优势是什么?

settimeout angularjs

50
推荐指数
2
解决办法
7万
查看次数

如何在不使用jQuery的情况下获取元素的offset().top值?

我正在使用Angular框架编写单页应用程序.我是新手.我已阅读本指南,以帮助我理解jQuery和Angular之间的根本区别,我想尽可能地遵循本指南,而不是使用jQuery.

除了jQuery有助于解决一些浏览器不兼容问题并提供一个有用的函数库,比如能够从窗口顶部知道元素的顶部位置,如$('element').offset().top.没有普通的JavaScript似乎能够接近而不需要重写这个功能,在这一点岂不一个更好的主意,用一个jQuery或类似的jQuery库?

具体来说,我正在尝试做的是设置一个指令,一旦元素的顶部滚动到窗口中的某个位置,就将元素固定到位.这是它的样子:

directives.scrollfix = function () {
    return {
        restrict: 'C',
        link: function (scope, element, $window) {

            var $page = angular.element(window)
            var $el   = element[0]
            var elScrollTopOriginal = $($el).offset().top - 40

            $page.bind('scroll', function () {

                var windowScrollTop = $page[0].pageYOffset
                var elScrollTop     = $($el).offset().top

                if ( windowScrollTop > elScrollTop - 40) {
                    elScrollTopOriginal = elScrollTop - 40
                    element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
                }
                else if ( windowScrollTop < elScrollTopOriginal) {
                    element.css('position', 'relative').css('top', '0').css('margin-left', '0');
                } …
Run Code Online (Sandbox Code Playgroud)

jquery window offset scrolltop angularjs

44
推荐指数
3
解决办法
10万
查看次数

如何捕获Angular应用程序中的内存泄漏?

我有一个用AngularJS编写的webapp,它基本上将API轮询到两个端点.所以,它每分钟都会进行一次调查,看看是否有新的东西.

我发现它有一个小的内存泄漏,我已尽力找到它,但我无法做到.在这个过程中,我设法减少了我的应用程序的内存使用量,这很棒.

在没有做任何其他事情的情况下,每次调查你都可以看到内存使用量的增长(这是正常的)然后它应该下降,但它总是在增加.我从改变阵列的清洗[]array.length = 0,我想我敢肯定,引用不持续存在,因此它不应该被保留的任何现象.

我也试过这个:https://github.com/angular/angular.js/issues/1522

但没有运气......

所以,这是两个堆之间的比较:

内存堆

大多数泄漏似乎来自(数组),如果我打开,它是通过解析API调用返回的数组,但我确定它们没有被存储:

这基本上是结构:

poll: function(service) {
  var self = this;
  log('Polling for %s', service);

  this[service].get().then(function(response) {
    if (!response) {
      return;
    }

    var interval = response.headers ? (parseInt(response.headers('X-Poll-Interval'), 10) || 60) : 60;

    services[service].timeout = setTimeout(function(){
      $rootScope.$apply(function(){
        self.poll(service);
      });
    }, interval * 1000);

    services[service].lastRead = new Date();
    $rootScope.$broadcast('api.'+service, response.data);
  });
}
Run Code Online (Sandbox Code Playgroud)

基本上,假设我有一个sellings服务,那就是service变量的值.

然后,在主视图中:

$scope.$on('api.sellings', function(event, data) {
  $scope.sellings.length = 0;
  $scope.sellings = data; …
Run Code Online (Sandbox Code Playgroud)

memory-leaks angularjs angularjs-ng-repeat

39
推荐指数
1
解决办法
2万
查看次数

角度相当于jQuery $ .map?

我正在从依赖jQuery过渡到在AngularJS中构建应用程序.我们建议在一些地方,以混合jQuery和角码.

我想念的一件事是数组的jQuery $ .map函数.我知道这可以使用本机Javascript 映射函数重写,但并未在所有浏览器中实现(特别是IE <v9).

那么,是否有一个Angular等价物,或者我应该回到写作for (var x = 0; x < foo; x += 1) {...}所以我可以停止包含jQuery?

更新有时您只需知道要搜索的内容即可.Bergie说'寻找polyfills'.这是一个参考指南(来自Modernizr工作人员),用于在旧版浏览器上使用现代代码的大量资源:HTML5 Cross Browser Polyfills

javascript jquery ecmascript-5 angularjs

36
推荐指数
2
解决办法
4万
查看次数

AngularJS - 使用属性查找元素

我是AngularJS的新手.我已经了解到我可以使用如下查询在DOM中找到元素:

var e = angular.element(document.querySelector('#id'));
var e = angular.element(elem.querySelector('.classname'));
Run Code Online (Sandbox Code Playgroud)

这对于按ID或CSS类名查找元素很有用.但是,我需要能够使用不同的方法找到元素.我有一个如下所示的元素:

<div my-directive class='myContainer'>...</div>
Run Code Online (Sandbox Code Playgroud)

我无法查询'myContainer',因为它重用了多少.出于这个原因,我想找到任何具有属性'my-directive'的元素.如何搜索DOM并找到使用'my-directive'的任何元素?

angularjs

36
推荐指数
3
解决办法
17万
查看次数