Question

我正在研究AngularJS指令。该指令具有一些自定义属性。我将使用这样的指令：

<my-directive show-links="false" />

show-links是一个属性，如果开发人员没有专门设置它，我希望默认为true。在尝试构建此指令时，我有以下JavaScript：

.directive('myDirective', function () {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      showLinks: '=?'
    },
    templateUrl: '/directives/my-directive.html',
    controller: function ($scope) {
      if (angular.isUndefined($scope.showLinks)) {
        $scope.showLinks = true;
        console.log('show links? ' + $scope.showLinks);
      }
    }
  };
});

my-directive.html中的我的HTML如下所示：

<div><h1>Hello! {{showLinks}}</h1></div>
<div ng-if="showLinks == true"">
  <a href='#'>do something</a>
</div>

评估此指令时，我可以在控制台窗口中看到＆＃34;显示链接？真＆＃34 ;.但是，在屏幕上，我没有看到＆＃34; true＆＃34;打印在＆＃34; Hello＆＃34;旁边。它就像在showLinks在范围之前渲染HTML一样。我做错了什么？

Answer 1

我记得有隔离范围的问题 - 解决方案是将隔离范围对象中的任何内容添加到指令HTML代码本身，如下所示：

.directive('widgetRecentEntries', function(){
        return {
            restrict: "E",
            replace: true,
            scope: {
                recents: "=recents"
            },
            templateUrl: "ngapp/js/tpl/widget-recent-entries.html"
        };
    })

指令HTML /模板：

<dl class="dl-horizontal flip-in" ng-repeat="item in recents" recents="recents">
    <dt>
    <a href="/{{item.seo_name}}.html">
        <img src="{{item.logo_url}}" alt="" width="80">
    </a>
</dt>
<dd>
    <p><a href="/{{item.seo_name}}.html">{{item.name}}</a></p> 
</dd>
</dl>

将指令范围值绑定到HTML

1 个答案: