Question

我为我的指令template.html编写模板：

<ul><span>{{name}}</span>
   <li ng-repeat="value in values">
</ul>

插头指令如：

app.directive('myDir', function(){
   return{
    restrict: 'A',
    templateUrl: 'template.html'
   };
});

我有一些js对象看起来像：

const myObj:{
    name:"MyObjName",
    values:["val1","val2","val3","val4"]
}

请告诉我，如何将我的对象发送到我的模板，以便它会像我想要的那样呈现指令？在索引html中，它看起来像<div my-dir="{{myObj}}"></div>

Answer 1

您可以将对象传递给指令范围，它将在您的模板中可用。只需使用

<!DOCTYPE html>
<html>
<head>
<script>

    var myWindow = {};

function openWin() {
    myWindow = window.open("http://www.google.com", "myWindow", "width=400, height=200");
}

function closeWin() {
    if (myWindow) {
        myWindow.close();
    }
}

function checkWin() {
    if (!myWindow) {
        document.getElementById("msg").innerHTML = "'myWindow' has never been opened!";
    } else {
        if (myWindow.closed) { 
            document.getElementById("msg").innerHTML = "'myWindow' has been closed!";
        } else {
            document.getElementById("msg").innerHTML = "'myWindow' has not been closed!";
        }
    }
}

</script>
</head>
<body>

<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<br><br>
<button onclick="checkWin()">Has "myWindow" been closed?</button>
<br><br>
<div id="msg"></div>

</body>
</html>

然后你可以按照你想要的方式传递对象。

 app.directive('myDir', function(){
   return{
    restrict: 'A',
    scope: {
       'myDir': '='
    },
    templateUrl: 'template.html'
   };
});

希望这会有所帮助。

Answer 2

var tsv = ArrExport.map(function(field, index) {
   if (index != ArrExport.length - 1) {
      return field.join("\t");
   }
 }).join('\r\n');

用法：

app.directive('myDir', function(){
   return{
    scope: {
      myDir: "="
    },
    restrict: 'A',
    templateUrl: 'template.html'
   };
});

<ul><span>{{myDir.name}}</span>
   <li ng-repeat="value in myDir.values"></li>
</ul>

Answer 3

在类声明中

public myObj: any;

在构造函数集

中

this.myObj={
    name:"MyObjName",
    values:["val1","val2","val3","val4"]
};

在模板中

<div [my-dir]="myObj"></div>

如何在我的指令中获得参数

3 个答案: