Question

我正在制作一个演示仪表板，在该仪表板内部有标题。我正在使用我的“header”指令“生成”标题。（希望我到目前为止以正确的方式做到这一点）

app.js

myapp.directive('header', function() {
    return {
        templateUrl: '../../partials/header.html'
    };
});

header.html中：

<h1>Logo</h1>
<span>{{breadcrumbs}}</span>

泛音/ dashboard.html

<header breadcrumbs="home"></header>

我可以使用“breadcrumbs”数据并将其传递到我加载的标题模板吗？

尝试以下内容但没有成功：

myapp.directive('header', function() {
    return {
        breadcrumbs: 'for the sake of this example it can be static',
        templateUrl: '../../partials/header.html'
    };
});

Answer 1

存在两种实现目标的方法：

您可以使用隔离范围：

myapp.directive('header', function() {
  return {
    scope: {
      breadcrumbs: "@"
    },
    templateUrl: '../../partials/header.html'
  };
});

attr功能的

或link属性：

myapp.directive('header', function() {
  return {        
    templateUrl: '../../partials/header.html',
    link: function(scope, element, attrs){
      scope.breadcrumbs = attrs.breadcrumbs
    }
  };
});

<强> UPD：

如果您在breadcrumbs属性（<header breadcrumbs="{{breadcrumbs}}"></header>）中使用插值，则上面的代码可以如下所示：

隔离范围：

myapp.directive('header', function() {
  return {
    scope: {
      breadcrumbs: "=" //two way binding
    },
    templateUrl: '../../partials/header.html'
  };
});

attr link函数的属性：

myapp.directive('header', function() {
  return {        
    templateUrl: '../../partials/header.html',
    link: function(scope, element, attrs){
      scope.breadcrumbs = scope.$eval(attrs.breadcrumbs) //eval interpolation value in this scope
    }
  };
});

Answer 2

是的，你可以这样做。

myapp.directive('header', function() {
  return {
    scope:{
      breadcrumbs: '@'
    },
    templateUrl: '../../partials/header.html'
  };
});

您可以直接在模板中使用breadcrumbs。无需在链接功能中执行任何操作。

angular指令 - 更改模板内的数据

2 个答案: