【问题标题】:get directive attribute defined in HTML in directive controller获取指令控制器中 HTML 中定义的指令属性
【发布时间】:2015-05-26 09:11:20
【问题描述】:

我正在创建一个自定义控制器,我想在其中获取控制器中的指令属性。这是我到目前为止所做的,但我无法获得属性值。

HTML 代码:

<my-text name="tester"></my-text>

角度代码:

app.directive('MyText', function() {
   var controller = ['$scope', function ($scope) {
        console.log($scope.name)
        $scope.text = $scope.name
      }];
  return {
    restrict: 'EA',
    scope: {
      name: '='
    },
    controller: controller,
    template: 'Name: {$ text $}'
  };
});

你可以看到我在 HTML 中定义了一个属性 name 有值 tester 我想在指令控制器中获取这个值,以便我可以对此进行一些计算并在 template 中显示结果。它只是我想要做的一个演示,但最后我会将 $http 请求发送到后端(POST 中的属性值)并在模板 HTML 中显示响应。

有什么我错的建议吗?

注意:我在 Angular 中使用此 {$ var $} 语法,因为我使用 Python / Django 作为后端并且都具有相似的语法

【问题讨论】:

  • 查看html代码中的指令用法。您应该将指令声明为“myText”而不是“MyText”。
  • @Bibin 拼写错误,无论如何 Razvan 的回答对我有用

标签: angularjs angular-directive


【解决方案1】:

这是一个演示plunker

你应该像这样更新你的指令:

app.directive('myText', function(){
  return {
    restrict: 'AE',
    scope: {
      name: '='
    },
    controller: function($scope, $element, $attrs){
      console.log($attrs.name)
      $scope.text = $attrs.name;
    },
    template: 'Name: {{text}}'
  };
});

【讨论】:

  • 还有一个问题,如果在 HTML 的 name 属性中我们想要使用动态值,然后通过指令获取,请参阅 this 我已经修改了你的 plunker
  • 这是同一个人
  • new_plunker 检查这一点,在这里我定义了将在指令 HTML 中使用的 new_name,以便指令 ctrl 可以获取并更新但 new_name 没有呈现,我认为在 new_name 可以呈现 directive 之前已经渲染了
  • 只需将控制器中的$attrs 替换为$scope
  • 是的,它有效。动态变量的方法使用 $scope 否则 $attrs
猜你喜欢
  • 1970-01-01
  • 2016-03-26
  • 1970-01-01
  • 2017-06-05
  • 2016-09-12
  • 2023-03-13
  • 1970-01-01
  • 1970-01-01
  • 2018-03-28
相关资源
最近更新 更多