标签: jqlite

我是angularjs的新手.我正在建造一个angularjs SPA.应用程序页面有两个部分 - 按钮区域和应用程序区域.应用程序区域是我的视图加载的位置.每个视图的按钮区域是相同的,因此我不将它包含在视图模板中,而是将其保留在应用程序窗口中.我的问题是,我希望我加载到应用程序区域的各种指令响应按钮区域中的点击.我如何收听源自指令之外的点击(或任何其他事件)？非常感谢!

我正在写一个指令,AngularJS我需要做的一件事就是找到一个表单中的所有控件并迭代它们.

如果jQuery加载我这样做:

var inputs = element.find(".ng-invalid,.ng-valid");
inputs.each(function ()
{
    var i = $(this);               

});

但由于它没有加载我只是Angular想我做的事情就像:

var inputs = element.find("input");
//for loop thru this
var selects = element.find("select");
//for loop thru this
//....etc

有没有更好的方法使用jQLite来实现这一目标？

在我的代码中有一行:

var contentWidth = angular.element(document.querySelector('.content'))[0].clientWidth;

它在运行应用程序时工作正常但在单元测试时出现错误:

TypeError: 'undefined' is not an object (evaluating 'angular.element(document.querySelector('.content'))[0].clientWidth')

如何解决这个问题？

我有一个带有指令的常规角度应用程序.该指令包含一个带ng-click="clickFunction()"调用的元素.单击该元素时,一切正常.我现在需要为此单击编写一个测试,确保在单击该元素时实际运行此函数 - 这就是我遇到的问题.

这是一个解释我的问题的方法:http://jsfiddle.net/miphe/v0ged3vb/

控制器包含一个clickFunction()应该在单击时调用的函数.单元测试应模仿指令元素的单击,从而触发对该函数的调用.

在clickFunction与sinonjs嘲笑,这样我可以检查是否被调用,还是没有.该测试失败,意味着没有点击.

我在这做错了什么？

我已经看到类似问题的答案,比如使用Sinon测试JavaScript Click事件,但我不想使用完整的jQuery,我相信我正在嘲笑(监视)正确的功能.

这是上面小提琴的js(对于那些喜欢在这里看到它的人):

angular.js,angular-mocks.js也加载.

// App
var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.person = 'Mr';
    $scope.clickFunction = function() {
        // Some important functionality
    };
});

myApp.directive('pers', function() {
    return {
        restrict: 'E',
        template: '<h2 ng-click="clickFunction()" ng-model="person">Person</h2>',
    };
});

// Test suite
describe('Pers directive', function() {
    var $scope, $controller, template = '<pers></pers>', compiled;
    beforeEach(module('myApp'));

    beforeEach(inject(function($rootScope, $controller, $compile) {
        $scope …

单击后将事件传递给ctrl.我想编写一个条件,如果element.target有类,它将返回truemodal-click-shield

题:

如何使用.hasClass()与event.target利用angulars' jqlite？

问题:

目前我收到类型错误说:

$scope.exitModal = function(event){
        // Return to current page when exiting the modal, via UI.
        // After state return, should set focus on the matching link.
        var target = event.target;
        console.log(target.hasClass('modal-click-shield'));
});

错误:

 TypeError: undefined is not a function

HTML:

  <div class="modal-click-shield" ng-click="exitModal($event)">
     <div ui-view="pdw"  class="product-container"></div>
  </div>

var referrer = $document.referrer;

需要的价值

$document.referrer 

在一个变量中。

我想在指令中实现此代码，但在 jQLite 中这不起作用应该如何完成？

 var thisCell = element.closest('.sampleclass');

Angularjs使用非常精简版本jQuery的叫jQLite(或mini-jQuery在一些网站).如果你添加对主jQuery的引用,Angularjs将使用你的主jQuery,我总是在我的应用程序中引用主jQuery.因此,为了减小Angularjs的大小,我想从Angularjs文件中删除jQLite.什么是简单(和安全)的方式来做到这一点？

如何使用jqlite以角度获取元素的attr数据？

HTML,

<button ng-click="loadForm($event)" href="form.php">Load Directive Form</button>
<div data-my-form></div>

棱角分明,

     app.directive('myForm', function() {
        return {
          controller:function($scope){
            $scope.isLoaded = false;
            $scope.loadForm = function(e){

                console.log(e.target.attr('href')); // error 

                var form = e.target.attr('href'); // error

                $scope.isLoaded = true;
            }
          },
          template: '<div><div ng-if="isLoaded" ng-include="'+ form +'" ></div></div>',
          link:function(scope, element) {

          }
        }
    });

我收到这个错误,

TypeError: e.target.attr is not a function

有任何想法吗？

我正在尝试创建select all一些文本的功能（在 angular js 中），这些文本以类似于下面给出的结构的格式出现。选择所有文本后，用户可以点击ctrl + c复制相同的文本。

<div ="container">
 <div class="header">My example header</div>
  <div class="section1">
    <span>test content1</span>
    <span>test content2</span>
  </div>
  <div class="section2">
    <span>test content3</span>
    <span>test content4</span>
  </div>
  <div class="footer">footer content</div>
</div>

会有一个按钮，通过点击它，所有出现在containerdiv内的文本都需要被选中。我搜索了很多示例，到目前为止，我找到的所有示例都提供了有关如何从 textarea 或 textbox 中选择文本的解决方案。我想知道如何从这样的 html 元素范围中选择所有文本。

我有以下指令:

template: '<div data-div="outer"><div data-div="inner"></div></div>',
link: function postLink(scope, elem, attrs) {
       var outer = elem.find('[data-div="outer"]');
       var inner = elem.find('[data-div="inner"]');
       outer.css({
           'background': 'red',
           'width': "100%",
           'height': "100%",
       });
       inner.css({
           'background': 'blue',
           'width': "50%",
           'height': "100%",
       });
    }

根据这篇文章,我尝试了这些选择器.但我使用的是jQLite,而不是JQuery.

那么,如何根据数据属性值查找元素？

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

我正在使用这个:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

然后在以后的时间点我想找到#pselectID元素.我$vehicleTypeDropdown看起来像这是jqLit​​e对象: -

<select class="vehicleTypeDropdown" id="vehicleType">
<option id="#pselect" value="">Please Select</option>
<option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
<option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

有两个问题 -

1. 它是在jqLit​​e文档中编写的,该.find()方法只查找标记,而不是类或id.那我怎么得到
   

   $vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

   作为jqLite内容的对象？

2. 我怎样才能找到该选项#pselect？我想手动删除它,请记住它可以在选项中以任何顺序.

我创建了一个AngularJs指令，该指令将焦点设置为html元素。但是它不适用于$ uibModal元素：

angular.module('ui.bootstrap.demo')
    .directive('focus', ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            link: function postLink(scope, element, attrs) {
                scope.$watch(attrs.focus, function(value) {
                    if(value === true) {
                        $timeout(function() {
                            element[0].focus();
                        });
                    }
                });
            }
        };
    }]);

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

如何将焦点设置到$ uibModal中的元素？