标签: angularjs-directive

在我们的应用程序中,我们有几层嵌套指令.我正在尝试为顶级指令编写一些单元测试.我已经嘲笑了指令本身需要的东西,但现在我遇到了来自低级指令的错误.在我对顶级指令的单元测试中,我不想担心低级指令中发生了什么.我只想模拟低级指令,基本上它没有做任何事情,所以我可以单独测试顶级指令.

我尝试通过这样的方式覆盖指令定义:

angular.module("myModule").directive("myLowerLevelDirective", function() {
    return {
        link: function(scope, element, attrs) {
            //do nothing
        }
    }
});

但是,这不会覆盖它,它只是在真正的指令之外运行它.如何阻止这些低级指令在顶级指令的单元测试中做任何事情？

我问这个问题是因为我不太清楚如何将rootcope视为传递给指令的依赖

我有一个指令,需要显示来自$ rootScope的一些信息......

我以为我需要将$ rootScope传递给一个指令但是当我写这样的指令时它似乎有效.

.directive("myBar", function () {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   '<div>' + 
                '<span ng-transclude></span>' + 
                '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                '</div>'
}
})

我什么时候需要这样做？

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   '<div>' + 
                '<span ng-transclude></span>' + 
                '{{rsLabels.welcome}} {{rsUser.firstName}}!' + 
                '</div>'
}
})

如果我需要在指令的link函数中使用rootScope,我可以使用rootScope吗？或者我应该在指令的控制器中执行它？

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    link: function (scope, element, attrs, rootScope) {
        rootScope.rsUser = { firstName: 'Joe' …

我试图切换指令使用的元素的可见性<div ngHide="readOnly">.值或readOnly通过指令传入.

angular.module('CrossReference')
    .directive('singleViewCard', [function() {
        return {
            restrict:'AE',
            templateUrl: '/CrossReference-portlet/js/templates/SingleViewCard.html',
            replace:true,
            scope: {
                readOnly:'@'

            },
            link: {
                pre:function(scope, tElement, tAttrs) {}, 
                post:function(scope, tElement, tAttrs) {};
                }
            }
        };
    }]);

这似乎适用于以下情况:

<!-- element rendered in single-view-card is hidden -->
<div single-view-card read-only="{{true}}"/>

<!-- element rendered in single-view-card is shown -->
<div single-view-card read-only="{{false}}"/>

但是,如果我反转布尔表达式<div ngHide="!readOnly">,该指令的以下用法不会按预期隐藏潜水:

<!-- element is rendered when it should be hidden -->
<div single-view-card read-only="{{false}}"/>

我究竟做错了什么？

我有一个递归的Angular指令,它使用模板变量并在link函数中编译.

问题是,我的模板已经变得非常冗长且失控,我想在外部HTML文件中将其外化(这也会使其更容易自动缩进).

如何将外部模板加载到可在内部使用的指令中$compile？

我已经看过了templateURL,但这并没有让我命名变量并将其传递给$compile函数.

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

和

嗨,我有一个文本区域的characeter计数器.我的问题是它不计算空格或换行符.我该怎么做才能这样做？

   <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" data-ng-minLength="1" data-ng  
    model="createprofilefields.description" required highlight-on-
    error></textarea>

    <br />

<!--counter-->
  <span class="form-help">{{1500-createprofilefields.description.length}}         
   Characters</span>

    </div>

我正在angularjs中写一个指令并得到上面提到的错误.我正在使用书中的代码.

.directive('myFacebook', [function(){
return {
    link: function(scope,element,attributes) {
        (function(d) {
                var js, id = 'facebook-jssdk',
                    ref = d.getElementsByTagName('script')[0];
                if (d.getElementById(id)) {
                    return;

                }
                js = d.createElement('script');
                js.id = id;
                js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                ref.parentNode.insertBefore(js, ref);
            }(document));
            // Initialize FB
            window.fbAsyncInit = function() {
                FB.init({

                    appId: 'xxxx', //birthday reminder
                    status: true, // check login status
                    cookie: true, // enable cookies to access the session
                    xfbml: false // parse XFBML
                });
                //Check FB Status
                FB.getLoginStatus(function(response) {
                     xxxx
                });
            };
        scope.username=''; …

我在使用angularjs指令找到带有注入的angular元素的子DOM元素时遇到了问题.

例如,我有一个这样的指令:

myApp.directive('test', function () {
    return {
        restrict: "A",
        link: function (scope, elm, attr) {
            var look = elm.find('#findme');
             elm.addClass("addedClass");
            console.log(look);
        }
    };
});

和HTML如:

<div ng-app="myApp">
    <div test>TEST Div
        <div id="findme"></div>
    </div>
</div>

我可以通过向它添加一个类来访问被限定的元素.但是,尝试访问子元素会在var look中生成一个空数组.

JSFiddle演示就在这里.

为什么这么简单的事情不能正常工作？

我有一个select元素定义如下:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

当我没有在包含这个select元素的指令中设置任何值时,一切正常.但是,当我执行类似的操作时newAddressForm.country_id = 98,Angular不会选择值为98的选项,而是在select元素的顶部注入一个新选项,如下所示:

<option value="? string:98 ?"></option>

是什么赋予了？这种格式是什么,为什么会发生这种情况？请注意,如果我console.log(newAddressForm.country_id)在指令中执行a ,我得到一个正常的"98",它在生成的HTML中只是奇怪.

编辑: 情境更新.切换到使用ng-select,但问题仍然存在.

奇怪的元素不再出现,但是,现在顶部还有另一个元素,一个只有问号?作为值,没有标签.

那就是我收集的,Angular的"none selected"选择.我仍然不明白为什么它不会选择我告诉它选择的选项.

做newAddressForm.country_id = 98不动也没有结果.这是为什么？

我正在使用将使用AngularJS的Rails 3.2应用程序.我可以让Angular做我需要的东西,但是我很难搞清楚如何测试我正在做的事情.我正在使用guard-jasmine来使用PhantomJS运行Jasmine规范.

这是(相关)html:

<html id="ng-app" ng-app="app">
  <div id="directive-element" class="directive-element">
  </div>
</html>

javascript(在coffeescript中)看起来像:

window.Project =
  App: angular.module('app', [])
  Directive: {}

Project.Directive.DirectiveElement =
  ->
    restrict: 'C'
    link: (scope, element, attrs) ->
      element.html 'hello world'
Project.App.directive 'directiveElement', Project.Directive.DirectiveElement

上面的代码完全符合它的目的.测试是问题所在.我根本无法让他们工作.这是我尝试过的一件事.发布这个主要是为了在某个地方开始对话.

describe 'App.Directive.DirectiveElement', ->
  it 'updates directive-element', ->
    inject ($compile, $rootScope) ->
      element = $compile('<div id="app" ng-app="app"><div id="directive'element" class="directive-element"></div></div>')
      expect(element.text()).toEqual('hello world')

顺便说一下,我是AngularJS的新手,所以如果有关于我没有遵循的命名空间,模块等的最佳实践,我们将非常感谢指导.

我如何进行测试才能使用？

我是AngularJs的新手,所以这可能是微不足道的.是否有任何内置的AngularJs directive可以检测表单中未保存的数据.如果没有,那么如何写一个.任何指针将不胜感激.

HTML代码是

<input type="text" runat="server" />

我的角度js控制器代码是

    function MyCtrl1($scope) {
      // code to do stuff
}MyCtrl1.$inject = ['$scope'];

我正在尝试编写一个指令来检测未保存的数据,我猜它是在上面的控制器中写的.如果错误,请更正我.