Question

我有一个AngularJS指令，它没有在HTML元素的一个属性中放置一个字符串（旨在成为图像的相对路径），我不知道为什么。

我的项目如下所示：

item : {
  name: 'Test Name',
  link: 'Assets/logo.png'
}

如果我单步执行javascript，我正确地从webservice接收链接，因此我的Angular控制器正确显示$ scope中的链接，这不是问题。

以下是我在该控制器的模板中遇到的问题：

<my-directive name="{{item.name}}" link="{{item.link}}"></my-directive>

这是我的指令的javascript：

angular.module('myModule').directive('myDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/RelativePathToTemplateFile.html',
    scope: {},
    link: function($scope, element, attr, model) {
      $scope.name = attr.name;
      $scope.link = attr.link;
    }
  }
})

当我查看呈现的HTML时，我有以下内容：

<div name="Test Name" link></div>

发生了什么事？如何正确传递此链接？

Answer 1

指令范围绑定技术可以解决此问题。尝试使用＆＃34; @＆＃34;将指令属性绑定到已评估的DOM属性。

<强> HTML

<div ng-controller="myCtrl">
  <my-directive my-name="{{item.name}}" my-link="{{item.link}}"></my-directive>
</div>

<强>的Javascript

angular.module("myApp",[])
.controller("myCtrl",function($scope){
  $scope.item = {
    name:"Test Name",
    link:"Assets/logo.png"
  };
})
.directive("myDirective",function(){
  return {
    restrict: "E",
    template: '<div name="{{myName}}" link="{{myLink}}">{{myName}}</div>',
    replace: true,
    scope:{
        myName:"@",
        myLink:"@"
    }
  };
});

这是jsFiddle DEMO，您可以参考它。

Answer 2

来自文档：

function link(scope, element, attrs) { ... } where:
* scope is an Angular scope object.
* element is the jqLite-wrapped element that this directive matches.
* attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

所以它是“attrs”，而不是“attr”

Answer 3

尝试：

<myDirective name="item.name" link="item.link"></myDirective>

会更好:)）

AngularJS指令没有正确接收属性中传递的链接

3 个答案: