相关疑难解决方法(0)

我仔细阅读了关于该主题的AngularJS文档,然后使用指令进行了调整.这是小提琴.

以下是一些相关的片段:

• 来自HTML:

  <pane bi-title="title" title="{{title}}">{{text}}</pane>
  

  Run Code Online (Sandbox Code Playgroud)

• 从窗格指令:

  scope: { biTitle: '=', title: '@', bar: '=' },
  

  Run Code Online (Sandbox Code Playgroud)

我有几件事没有得到:

• 我为什么要使用"{{title}}"与'@'和"title"使用'='？
• 我是否也可以直接访问父作用域,而无需使用属性装饰我的元素？
• 文档说"通常需要通过表达式将数据从隔离范围传递到父范围",但这似乎也适用于双向绑定.为什么表达路线会更好？

我找到了另一个显示表达式解决方案的小提琴:http://jsfiddle.net/maxisam/QrCXh/

我需要创建一个指令,该指令作用于表格单元格,其中使用表格行进行渲染ng-repeat- 为此,我部分地依赖于对题为"在ng-repeat完成时调用函数"的问题的答案.然而,与Q&A不同,我需要向我的指令传递一个参数,为此我部分依赖于这个答案(对于一个题为"Angularjs - 将参数传递给指令"的问题).

所以在我的情况下,我已经添加fixed-column-tooltip了我的指令,并columnselector作为其参数<tr>如下:

<tr fixed-column-tooltip columnselector=".td-keyField" ng-repeat="trData in trDataWatch">

但是根据第二个答案,我将我所学到的内容添加到我的指令"隔离范围"中,根据第一个答案我不再能够访问原始范围:

'use strict';

angular.module('cmt.cases.directives')

.directive('fixedColumnTooltip', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            columnselector: '@'
        },
        link: function (scope, element, attr) {
            if (scope.$last === true) { //undefined because not operating on original scope
        ...

有没有办法保持对原始范围的访问,但也有权访问columnselector参数？

在angular中创建自定义指令时我有一个问题.当我使用链接功能时,我不确定在使用attrs或scope访问属性时有什么真正的区别.以这段代码为例:

myApp.directive('someDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            title: '=title'
        },
        template: '<img/>',
        link: function(scope, element, attrs) {
            if (scope.title) {
                // do something here
            }
            if (attrs.title){
                // do something here
            }
        },
    }

根据我的观察,从attrs和范围访问'title'属性具有类似的效果.真正的区别是什么？

这更像是解决此问题的组织方法,而不是直接解决方案.我的问题本身就是如果我有两个指令不相互依赖,并且可以独立工作以达到其目的.但是如果其中一个指令存在,那么另一个指令需要在另一个指令就绪后执行.在这种情况下,那么在不需要对任何函数调用或事件进行硬编码的情况下,确保以这种方式运行的逻辑方法是什么？

让我们假设您有一个指令可以构建某种类型的网格:

angular.module('App').directive('appGrid',function() {
  return function($scope, element) {
    $scope.rows = ...
  };
});

然后我有另一个指令,使元素可以水平滚动:

angular.module('App').directive('appPane',function() {
  return function($scope, element) {
    element.attachHorizontalScroll();
  };
});

所以我的HTML示例如下所示:

<div data-app-grid data-app-pane>
  <div data-ng-repeat="row in rows">
    <div data-ng-repeat="cell in row.cells">
      {{ cell.data }}
    </div>
  </div>
</div>

基本上,appPane指令需要在执行appGrid指令并且表准备就绪后运行.

我能想到的一个解决方案是观察数据以查看何时使用该$scope.$watch方法准备就绪,但这会产生问题,因为更改可能会多次发生,这将是冗余更新页面的糟糕设计,这也会带来问题如果多个指令正在写入正在监视的同一范围变量.

另一个解决方案是让第一个指令发出一个事件(类似于elementReady),然后让第二个指令接管.但是,如果第一个指令不存在呢？那么第二指令怎么会知道什么时候做它的工作呢？可能有另一个指令基本上是一个空指令,只是为所有其他元素触发事件,但这是一个黑客攻击.如果多个其他指令触发elementReady事件,会发生什么？

另一种解决方案是创建第3个指令,该指令通过共享服务在两个指令之间共享逻辑.但这使得第3指令完全依赖于其他指令以及它们之间的共享服务.这还需要更多,不必要的测试代码以及​​编写指令的实际代码(与第二个解决方案相比,代码要多得多,只需要一行+一行代码).

有任何想法吗？

我正在构建一个自定义的AngularJS指令来创建一个谷歌地图,我已经在我的标签中的自定义属性中存储了一些谷歌地图选项:

<googlemap zoom-control="true" …></googlemap>

Angular的指令编译方法有参数(tElement, tAttrs, transclude); 当我登录tAttrs到控制台时,该对象具有名称已将连字符转换为camelCase的属性:

谁在做Angular或浏览器(在Firefox和Chrome中检查过)？我可以依靠这种行为吗？

PS当我检查DOM时,html元素的属性仍然有连字符.