Question

我有一个组件要将变量传递给。

基本上我的组件由：

调用

<profileimage></profileimage>

我想通过

传递一个ID

<profileimage userid="user.ID"></profileimage>

然后我可以在控制器中使用该ID来加载图像

function ProfileImageController($scope) {
   var ctrl = this;
} 
var app = angular.module('creatif')
    .component('profileimage', {
       templateUrl: 'components/profileimage/profileimage.html',
       controller: ProfileImageController
   });

Answer 1

使用bindings接收自定义组件中的变量。

.component('profileimage', {
   templateUrl: 'components/profileimage/profileimage.html',
   controller: ProfileImageController,
   bindings: {
     userid: '<'
   }
});

然后，您可以userid在控制器中使用this.userid。浏览angular's documentation了解更多信息。

奖金提示：

将指令定义移出控制器功能。

function ProfileImageController($scope) {
   var ctrl = this;
}

angular.module('creatif')
  .component('profileimage', {
     templateUrl: 'components/profileimage/profileimage.html',
     controller: ProfileImageController,
     bindings: {
       userid: '<'
     }
  });

看起来更可读，不是吗？

Angular JS动态模板传递变量

1 个答案: