我有一个指令,这是代码:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

我想在用户操作上调用updateMap()。操作按钮不在指令上。

从控制器调用updateMap()的最佳方法是什么?

我需要能够添加例如“contentteditable”元素,基于范围上的布尔变量。

使用示例:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

将导致contentteditable =true被添加到元素中,如果$scope。editMode被设置为true。 是否有一些简单的方法来实现这种ng-class属性行为?我正在考虑写一个指令,如果没有的话就分享。

编辑: 我可以看到,我提议的attrs指令和ng-bind-attrs指令之间似乎有一些相似之处,但它在1.0.0中被删除了。为什么是Rc3 ?

如果我有一个导航栏在引导项目

Home | About | Contact

当每个菜单项处于活动状态时,如何为它们设置活动类?也就是说,当角路由为at时,我如何设置class="active"

#/ home #/about用于about页面 #/contact为联系人页面

我正在寻找任何方式访问“父”范围内的指令。范围、排除、要求、从上面传入变量(或范围本身)等的任何组合。我完全愿意竭尽全力,但我想避免一些完全俗气或无法维护的东西。例如,我知道我现在可以通过从preLink参数中获取$范围并迭代它的$sibling范围来找到概念上的“父”。

我真正想要的是能够在父作用域中监视一个表达式。如果我能做到这一点,那么我就能完成我在这里想做的事情: AngularJS -如何渲染变量的部分?

需要注意的是,该指令必须在相同的父作用域内可重用。因此,默认行为(范围:false)不适合我。我需要每个指令的实例都有一个单独的作用域,然后我需要$watch一个存在于父作用域中的变量。

一个代码示例值1000字,因此:

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});

我想捕捉下面文本框上的回车键事件。为了更清楚地说明这一点,我使用ng-repeat填充tbody。下面是HTML:

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" 
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

这是我的模块:

angular.module('components', ['ngResource']);

我使用一个资源来填充表,我的控制器代码是:

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}

在编写Angular指令时,你可以使用以下任意函数来操作声明指令的元素的DOM行为、内容和外观:

编译 控制器 pre-link post-link

对于应该使用哪个函数,似乎有些困惑。这个问题包括:

基本指令

如何声明各种函数? 源模板和实例模板之间的区别是什么? 指令函数的执行顺序是什么? 在这些函数调用之间还会发生什么?

功能性质,该做的和不该做的

编译 控制器 Pre-link Post-link

相关问题:

指令:链接vs编译vs控制器。 在定义angular.js指令时,'controller', 'link'和'compile'函数之间的区别。 angularjs中的compile函数和link函数有什么区别? AngularJS指令中预编译元素和后编译元素的区别? Angular JS指令-模板、编译还是链接? Angular js指令中的post link vs pre link。

我知道ng-show和ng-hide会影响元素上的类集,而ng-if控制元素是否作为DOM的一部分呈现。

是否有关于选择ng-if而不是ng-show/ng-hide或反之的指导方针?

创建指令时,可以将代码放入编译器、链接函数或控制器中。

在文件中,他们解释说:

编译和链接函数用于angular的不同阶段 周期 控制器在指令之间共享

然而,对我来说,不清楚哪种代码应该放在哪里。

例如:我可以在compile中创建函数并将它们附加到link中的作用域,还是只将函数附加到控制器中的作用域?

如果每个指令都有自己的控制器,那么指令之间如何共享控制器?控制器是真正共享的还是仅仅是作用域属性?

在AngularJS中,“Angular的方法”是什么?

更具体的要求:

当打开一个模态时,将焦点设置在这个模态内预定义的<input>上。 每次<input>变得可见时(例如,通过单击某个按钮),将焦点设置在它上。

我尝试用自动对焦来实现第一个要求,但这只在Modal第一次打开时有效,并且只在某些浏览器中有效(例如在Firefox中它不起作用)。

我已经仔细阅读了AngularJS关于这个主题的文档,然后摆弄了一个指令。这是小提琴。

以下是一些相关片段:

来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '=', title: '@', bar: '='},

有几件事我不明白:

为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围,而不装饰我的元素与属性? 文档说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?

我发现另一个小提琴,显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/