Question

我编写了一个带有条件内容（component.html）的示例指令：

<div class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<div class="panel-body">
    <p ng-show="loadingVisible()" class="text-center">Loading...</p>

    <div ng-show="!loadingVisible()" ng-transclude></div>
</div>

指令代码（component.js）：

app.directive('component', function () {
    return {
        restrict : 'A',
        transclude : true,
        replace : true,
        templateUrl : 'component.html',
        require : '^title',
        scope : {
            title : '@',
            loadingVisible : '&'
        },
        controller : [ '$scope', function ($scope) {
            if (!$scope.loadingVisible) {
                $scope.loadingVisible = function () {
                    return false;
                };
            }
        } ]
    };
});

此指令的主要用途是这样的（sample.html）：

<div component title="Title">
    <div id="t"></div>
</div>

控制器代码（sample.js）：

app.directive('sample', function () {
        return {
            restrict: 'A',
            templateUrl: 'sample.html',
            controller: [ '$scope', function ($scope) {
                $('#id');
        } ]
    };
});

0 问题是使用jQuery选择器获取的div是不可见的。我想这是因为loadingVisible方法（条件内容）在构建阶段隐藏了div。因此，当sample指令尝试获取它时，它会失败。难道我做错了什么？什么是这个问题的coorect解决方案？或许我的指令知识错了？

我会感激任何帮助：）

Answer 1

如果您尝试与DOM（或指令元素本身）进行交互，则您需要定义link函数。在角度编译指令后，link函数会被触发，并允许您访问指令scope，element本身以及指令上的任何attributes。所以，比如：

link: function (scope, elem, attrs) {
  /* interact with elem and/or scope here */
}

~~我仍然有点不清楚你的指令试图完成什么，所以提供更多帮助很难。还有其他细节吗？~~

所以如果你想确保指定一个标题，你可以在指令被链接时检查是否存在标题范围var，如果不存在则抛出错误。

另外，是否有任何理由loadingVisible需要表达？（使用＆＃39;＆amp;＆＃39;语法）。如果您只是需要根据此值显示/隐藏内容，您可以执行正常的单向操作＆＃39; @＆＃39;捆绑。整体而言，如：

app.directive('component', function () {
    return {
        restrict : 'A',
        transclude : true,
        replace : true,
        templateUrl : 'component.html',
        scope : {
            title : '@',
            loadingVisible : '@'
        },
        link : function (scope, elem, attrs) {

          if (!scope.title) {
            throw 'must specify a title!';
          }
          if (!attrs.loadingVisible) {
              scope.loadingVisible = false;
          }
        }
    };
});

如果您需要访问任何已转换的内容，可以使用注入链接功能的elem值，如下所示：

elem.find('#a');

（更新的）工作plnkr：http://embed.plnkr.co/JVZjQAG8gGhcV2tz1ImK/preview

Answer 2

问题是指令结构是这样的：

  <div component>
    <div id="a"></div>
  </div>

该指令用于这样的地方：

ASD

test指令在其控制器（或链接）函数中使用“a”元素。问题是测试控制器代码在div被转换之前运行，并且它看不到内容：/一个简单的解决方法是组件应该在test指令之前。你有这个问题的其他解决方案吗？

角度 - 条件，转换

2 个答案: