Question

我有一个角度指令不能正确渲染。

这是html：

<cloud-login ng-repeat='c in ctrl.clouds' cloud="{{c}}"></cloud-login>

和指令：

function CloudLoginDirective() {
  return {
  restrict: 'AE',
  template: '<a ng-click="ctrl.cloudLogin("{{cloud}}")"><img ng-src="../images/{{cloud}}.png"/></a>',
  link: function(scope, element, attrs) {
    attrs.$observe('cloud', function(cloud) {
      scope.cloud = cloud;
    });
  }
 };
}

在我的模板中，只有ng-src正确填充了相应的文本。

ng-click不会。

任何提示？

最佳。

Answer 1

您的问题是由ng-click表达式导致的无效表达式引起的：<a ng-click="ctrl.cloudLogin("{{cloud}}")">由于所有这些不匹配或过早终止引号而导致语法错误。 ng-click采用您不必插入的表达式。只是做：

<a ng-click="ctrl.cloudLogin(cloud)">

<强> Plnkr

您还可以使指令更简单地删除所有这些属性监视并使用隔离范围和函数绑定以及将cloud指令与其父控制器解耦，如下所示：

.directive('cloudLogin', function CloudLoginDirective() {
  return {
  restrict: 'AE',
  scope:{
    cloud:"=", // Using a 2 way binding, if you need only text then just use @ combined with {{c}} when used
    onClick:"&" //Function binding
  },
  template: '<a ng-click="onClick({cloud: cloud})"><img ng-src="../images/{{cloud}}.png"/>{{cloud}}</a>'
 };
});

和

<cloud-login ng-repeat='c in ctrl.clouds' 
             cloud="c" 
             on-click="ctrl.cloudLogin(cloud)"></cloud-login>

<强> Plnkr

Angular指令无法正确呈现

1 个答案: