Question

我正在尝试做最简单的事情，从JSON我重复一个菜单，其中定义了某个滚动目的地。在相同的重复元素上，我设置了一个指令，并将目标作为参数传递给我的指令函数。在这个函数里面，我要做的就是访问元素，但由于某种原因我无法访问元素。

我得到的就是这个：

[context: document, selector: "#skills"]
[context: document, selector: "#projects"]
[context: document, selector: "#about"]
[context: document, selector: "#form"]

当我得到类似于这个测试的东西时，我做了：

[header#site-header.container-fluid.ng-scope, context: document, selector: "#site-header"]

我尝试访问的所有这些选择器都来自包含ng的文件：

<div ng-include="'views/templates/skillset.html'"></div>
<div ng-include="'views/templates/projects.html'"></div>
<div ng-include="'views/templates/about.html'"></div>
<div ng-include="'views/templates/form.html'"></div>

这可能是问题吗？如果是这样，我如何获得这些选择器的访问权限？我尝试使用类似$('#skillset')直接访问它们但产生相同的结果。

它是否也是范围问题？由于包含的文件有自己的范围，因为指令本身绑定到core模块，它们是它们的父范围，所以看起来很奇怪。

包含文件的示例：

<div id="skillset" class="container padding narrow" ng-controller="SkillsCtrl">
  <div class="row">
    <div class="col-sm-3 fav-box" ng-repeat="skill in skillset.favorites">
      <img ng-src="{{skill.imageUrl}}" alt="{{skill.alt}}" class="fav-box__logo">
    </div>
  </div>
</div>

这是我的JSON：

{
  "menu": {
    "skillset": {
      "scrollTo": "#skills"
    },
    "projects": {
      "scrollTo": "#projects"
    },
    "about": {
      "scrollTo": "#about"
    },
    "contact": {
      "scrollTo": "#form"
    }
  }
}

标记：

<ul class="nav navbar-nav" id="site-nav">
  <li ng-repeat="item in menu" class="menu-item text-center" 
      data-smooth-scroll="{{item.scrollTo}}">
  </li>
</ul>

我的指示：

core.directive('smoothScroll', [function() {

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var dest = $(attrs['smoothScroll']);
      console.log(dest);

    }
  }
}]);

Answer 1

除非您通过隔离范围定义对它的引用，否则angular指令的属性不会被评估为角度表达式的术语。你的指令应该是

core.directive('smoothScroll', [function() {
  return {
    restrict: 'A',
    scope: {
        smoothScroll: '='
    }
    link: function(scope, element, attrs) {
      var dest = scope.smoothScroll;
      //do smooth scroll
      console.log(dest);
    }
  }
}]);

用法应为data-smooth-scroll="item.scrollTo"，不带花括号

无法访问包含ng的文件中的元素

1 个答案: