标签: directive

有没有办法在Python中执行以下预处理程序指令？

#if DEBUG

< do some code >

#else

< do some other code >

#endif

想象一下AngularJS中你想要创建一个需要响应全局事件的指令的情况.在这种情况下,假设窗口调整大小事件.

对此最好的方法是什么？我看到它的方式,我们有两个选择:1.让每个指令绑定到事件并在当前元素上做它的魔术2.创建一个全局事件监听器,它执行DOM选择器以获取逻辑应该在其上的每个元素应用.

选项1的优点是您已经可以访问要执行某些操作的元素.但是......选项2的优点是您不必在同一事件上多次绑定(对于每个指令),这可能是性能优势.

我们来说明两个选项:

选项1:

angular.module('app').directive('myDirective', function(){

     function doSomethingFancy(el){
         // In here we have our operations on the element
    }

    return {
        link: function(scope, element){
             // Bind to the window resize event for each directive instance.
             angular.element(window).on('resize', function(){
                  doSomethingFancy(element);
             });
        }
    };
});

选项2:

angular.module('app').directive('myDirective', function(){

    function doSomethingFancy(){
         var elements = document.querySelectorAll('[my-directive]');
         angular.forEach(elements, function(el){
             // In here we have our operations on the element
         });
    }

    return {
        link: function(scope, element){
             // Maybe we have to do something in here, …

我正在尝试编写一个自动完成指令,该指令使用$ http请求从服务器获取数据(不使用任何外部插件或脚本).目前它仅适用于静态数据.现在,我知道我需要将$ http请求插入到source:指令中,但是我找不到关于这个主题的任何好的文档.

http请求

$http.post($scope.url, { "command": "list category() names"}). 
            success(function(data, status) {
                $scope.status = status;
                $scope.names = data;    
            })
            .
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;   
            });

指示

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
        };
    });

视图

<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat"> 

那么,我如何正确地将这一切拼凑成Angular方式呢？

我通过该指令的属性将数组传递给指令时遇到问题.我可以把它读作一个字符串,但我需要它作为一个数组,所以这是我想出来但它不起作用.帮助任何人？事先说

使用Javascript ::

app.directive('post', function($parse){
    return {
        restrict: "E",
        scope:{
            title: "@",
            author: "@",
            content: "@",
            cover: "@",
            date: "@"
        },
        templateUrl: 'components/postComponent.html',
        link: function(scope, element, attrs){
            scope.tags = $parse(attrs.tags)
        }
    }
}

HTML ::

<post title="sample title" tags="['HTML5', 'AngularJS', 'Javascript']" ... >

我有暴露模块模式,看起来像这样:

'use strict';

angular.module('app', [])
   .directive('myDirective', ['SomeDep', function (SomeDep) {
       var linker = function (scope, element, attr) {
          // some work
       };

       return {
          link: linker,
          restrict: 'E'
       };
   }])
;

我遇到的问题是将$ watch集成到这里.通过'$ window'服务专门观看窗口调整大小.

[编辑]:

我一直意识到我的问题是什么......当我忘记我将它作为属性实现时,我正在限制元素... @ _ @;

我的网站将有多个部分,每个部分我打算可以调整大小.为了实现这一点,我制定了一个"可调整大小"的指令,例如:

<div class="workspace" resize="full" ng-style="resizeStyle()">
<div class="leftcol" resize="left" ng-style="resizeStyle()">

使用类似于以下内容的指令:

lwpApp.directive('resize', function ($window) {
    return {
        scope: {},

        link: function (scope, element, attrs) {
            scope.getWinDim = function () {
                return {
                    'height': window.height(),
                    'width': window.width()
                };
            };

            // Get window dimensions when they change and return new element dimensions
            // based on attribute
            scope.$watch(scope.getWinDim, function (newValue, oldValue) {
                scope.resizeStyle = function () {
                    switch (attrs.resize) {
                    case 'full':
                        return {
                            'height': newValue.height,
                            'width': (newValue.width - dashboardwidth)
                        };

                    case 'left':
                        return …

最近我开始重构我正在使用TypeScript进行的一个Angular项目.使用TypeScript类来定义控制器非常方便,并且由于static $inject Array<string>属性而适用于缩小的JavaScript文件.并且您可以获得非常干净的代码,而无需从类定义中拆分Angular依赖项:

 module app {
  'use strict';
  export class AppCtrl {
    static $inject: Array < string > = ['$scope'];
    constructor(private $scope) {
      ...
    }
  }

  angular.module('myApp', [])
    .controller('AppCtrl', AppCtrl);
}

现在我正在寻找解决方案来处理指令定义的类似情况.我找到了一个很好的做法,将指令定义为函数:

module directives {

  export function myDirective(toaster): ng.IDirective {
    return {
      restrict: 'A',
      require: ['ngModel'],
      templateUrl: 'myDirective.html',
      replace: true,
      link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrls) => 
        //use of $location service
        ...
      }
    };
  }


  angular.module('directives', [])
    .directive('myDirective', ['toaster', myDirective]);
}

在这种情况下,我被迫在指令定义中定义Angular依赖项,如果定义和TypeScript类在不同的文件中,则可能非常容易出错.使用typescript和$inject机制定义指令的最佳方法是什么,我正在寻找一种实现TypeScript IDirectiveFactory接口的好方法,但我对我找到的解决方案并不满意.

我有一个AngularJS属性指令,我想在父输入的值改变的任何时候采取行动.现在我正在使用jQuery:

angular.module("myDirective", [])
.directive("myDirective", function()
{
    return {
        restrict: "A",
        scope:
        {
            myDirective: "=myDirective"
        },
        link: function(scope, element, attrs)
        {
            element.keypress(function()
            {
                // do stuff
            });
        }
    };
});

有没有办法在没有jQuery的情况下做到这一点？我发现keyPress事件并没有完全符合我的要求,虽然我确信我会想出一个解决方案,但当我在Angular项目中使用jQuery时会感到有些紧张.

那么Angular的做法是什么？

我创建了一个包含按钮的自定义指令.此按钮从'callback'属性指定的父作用域调用方法.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Simple directive</title>

    <script src="js/lib/angular/angular.js"></script>

    <script type="text/javascript">
        var app = angular.module('app', []);

        app.controller('TestController', function($scope) {

            $scope.doSomething = function(param) {
                alert('Something called with: ' + param);
            }
        })

        app.directive('myDirective', function() {
            var ret = {
                restrict: 'E',
                scope: {
                    user: '@',
                    callback: '&'       // bound a function from the scope
                },
                template: '<div>Hello {{user}}<button ng-show="hasCallback()" ng-click="callback({userData: user})">Callback</button>',
                controller: function($scope) {
                    $scope.hasCallback2 = function() {
                        var t = typeof $scope.callback;
                        return t == 'function';
                    }

                    $scope.hasCallback = …

根据该文件一个template可以是一个函数,它有两个参数,一个element和attributes并返回表示模板的字符串值.它用HTML的内容替换当前元素.替换过程将所有属性和类从旧元素迁移到新元素.

该compile函数处理转换模板DOM.它有三个参数,一个element,attributes和transclude功能.该transclude参数已被弃用.它返回一个link函数.

似乎a template和a compile函数非常相似,可以实现相同的功能.该template函数定义模板,compile函数修改模板DOM.但是,它可以在template函数本身中完成.我看不出为什么修改template函数外的模板DOM .反之亦然,如果可以在compile函数中修改DOM,那么函数的需求是template什么？