Question

所以我很困惑！我的HTML看起来像这样：

<span paper-embed="" url="theUrl"></span>

和theUrl是一个从我的ng-controller加载不同URL的变量。然后我有一个Angular指令，如下所示：

app.directive('paperEmbed', function() {
    return {        
        restrict: 'AEC',
        transclude:true,
        scope: {
            key: '=',
            value: '='
        },
        link: function(scope, element, attrs) {
            // is does some jQuery here
        }
    };
});

我的问题是，我想访问指令中的URL - 名为 theUrl 的变量，那么我该怎么做？我抬头看着SA，似乎是

console.log({{theUrl}});

可能会有效，但事实并非如此。

Answer 1

将范围更改为

scope: {
        key: '=',
        value: '=',
        url: '='
    },

在您的链接功能中，您可以像scop.url一样使用它

Answer 2

您可以使用attrs.url

访问它

Answer 3

您可以使用attrs.url来访问它，也可以将url添加到范围中：

app.directive('paperEmbed', function() {
return {

    restrict: 'AEC',
    transclude:true,
    scope: {
        key: '=',
        value: '=',
        url: '@'
    },

    link: function(scope, element, attrs) {
      console.log(scope.url);

    }
  };

每当您像上面一样向范围添加变量时，该指令期望html属性提供该值。在这种情况下url。

<div paper-embed="obj1" key="obj2" value="obj3" url="obj4"></div>

scope.url === obj4;

Answer 4

因为您尝试使用以下内容实现指令：

<span paper-embed="" url="theUrl"></span>

你应该使用restrict: 'A'， url属性可以通过范围声明@或通过传递到链接函数的attrs对象访问。

关于console.log({{theUrl}})。 {{}}专门设计用于在标记中插入javascript-keys，通过$ compile循环处理。

这是让你入门的东西：

HTML

<span paper-embed url="http://example.com" />

的javascript

var app = angular.module('exampleApp', []);
app.directive('paperEmbed', function() {
    return function(scope, elem, attrs) {
        console.log(attrs.url);
    };
});

在此处获取更详细的信息：https://docs.angularjs.org/api/ng/service/ $ compile＃directive-definition-object

Answer 5

在许多其他方面，有两种简单的方法可以做到这一点： - 第一种方法是使用attrs访问它。 - 第二种方法是通过在范围内定义来传递参数。

第一种方法是使用attrs。 attrs具有所有属性。您只需访问链接函数中的URL作为attrs.url

即可

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="#00ff00">

    </LinearLayout>

    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#ff0000"/>

</LinearLayout>

您将看到放置的任何内容而不是控制台上显示的。

另一种方法是将您的指令更改为以下内容： app.directive（＆＃39; paperEmbed＆＃39;，function（）{ 返回{

link:function(scope,element,attrs){
    console.log(attrs.url)
}

现在您可以在链接函数中以scope.url的形式访问它。要设置要传递的值，只需设置$ scope.theUrl =＆＃39;无论您的网址是什么＆＃39;在您的控制器中。

试图将变量加载到Angular指令中

5 个答案: