khajaamin

Question

我有简单的指令，我希望访问模板中链接函数中的变量。我怎么能做到这一点？

我的指示：

app.directive("hello", function() {
  return {
    restrict: "E",
    template: '<div> '+str+' <div/>'
    link : function(scope, element, attrs) {
      var str = "hello";
    }
  }
});

以下是codepen上的代码：demo

Answer 1

在范围中添加变量，它们将在模板中可用

scope.str = "hello";

，您的模板应使用角度表达式

template: '<div>{{str}}<div/>',

所以你的指令就像

app.directive("hello", function() {
  return {
    restrict: "E",
    template: '<div>{{str}}<div/>',
    link : function(scope, element, attrs) {
      scope.str = "hello";
    }
  }
});

修改

如果要绑定html使用ngbindHtml

请找到plnkr

Answer 2

我有多种方法可以在这里解释你，所以请考虑两方面的变化需要我的意思是你想从指令调用发送变量

<html ng-app="app">
<body>
  <hello data-str="'I am don'"></hello>
</body>
</html>

这里data-str意味着str是变量，它有文字＆＃34;我不是＆＃34;多数民众赞成

现在

angular.module("app", []);

angular.module("app").directive("hello", function() {
  return {
    scope:{
      str:"="
    },
    restrict: "E",
    template: '<div>{{linkVar}}{{str}}<div/>',
    link : function(scope, element, attrs) {
     scope.linkVar = 'It works!' 
      console.log(scope.str);
    }
  }
});

这里

你可以在我添加的指令对象中看到这个

 scope:{
          str:"="
        },

这里我们决定＆＃34; str＆＃34;当指令在这样的html中调用时，将提供，而不仅仅是这个请注意

现在

scope.linkVar = 'It works!'

这是最重要的事情，你应该看到scope.linkVar意味着你只有javascript变量，名称为str =＆＃34; hello＆＃34 ;;这不是角度方式，因此angular不会更新其所有引用。我的意思是你在模板中使用。

现在希望它清楚，如果是，请告诉我。祝你玩得愉快

khajaamin

Answer 3

您可以使用'this'

app.directive("hello", function() {
  return {
    this.str = '';
    restrict: "E",
    template: '<div> '+this.str+' <div/>'
    link : function(scope, element, attrs) {
      this.str = "hello";
    }
  }
});

将参数从链接函数传递给角度指令中的模板

3 个答案:

khajaamin