如何使用自定义指令。

时间:2014-01-23 14:02:10

标签: angularjs angularjs-directive angularjs-scope angular-ui

我在下面提到了HTML代码

<div class="panel" ng-controller="myController">
   <div  myArr="arr" my-Dir="">
</div> 

JavaScript

app.controller('myController',['$scope',function($scope){
// here i have one array of objects arr is here
}])

和指令是

app.directive("myDir", function() {
scope: {
     myArr: "=",
    },
    templateUrl: "views/myHTML.html"
  };
});

这里我包含了myHTML.html文件。如何将数组传递给此文件?我在myHTML.html文件中需要这个数组。我想使用ng-repeat.

在myHTML中显示数组元素

2 个答案:

答案 0 :(得分:2)

您正在html中使用dayArr,然后尝试将您的范围隔离在名为dayArray的内容上。这些不匹配。您还需要将数组传递给dayArr,以便它实际上可以在您的范围中具有值

我已经更新了小提琴以获得一个有效的例子http://jsfiddle.net/zpWsz/2/

这是相关的部分:

这是我传入一些虚拟数组的地方。

<div  my-dir="" day-arr="[1,2,3]" >

以下是更新的指令部分:

    scope: {
      dayArr : "="
    },
    template: '<ul>' + 
              '<li ng-repeat="i in dayArr">{{ i }}</li>' +
              '</ul>',

一个templateUrl也会起作用,但是如何在小提琴中使用它会导致js错误。

希望这会有所帮助。

答案 1 :(得分:0)

自定义指令模板

app.directive('myDir', function(){
    return {
        scope: {
          myArr: "=",
        },
        restrict: 'EAC',
        templateUrl: 'views/myHTML.html',
        link: function(scope, element, attr) { }
    };
});

并使用它

<div data-my-dir data-my-arr="arr">