因此，我正在尝试创建一个指令，该指令将在列中布局一组项目。在插件中，我有一个非常简化的版本，仅使用一个ul，但这并不重要。我希望该指令被称为like。
<my-column-layout collection="names">
<tab name="{{ item }}"></tab>
</my-column-layout>
我想使用内部html（此处的标签）作为集合中每个项目的模板。我试图在my-column-layout模板中只添加ng-repeat
template : '<ul><li ng-repeat="item in collection" ng-transclude></li></ul>
可以，但是它没有访问包含控制器的作用域的权限，因此我在选项卡上没有任何单击事件，无法让它在控制器中调用函数。因此，我认为使用跨步法是正确的方向，但不确定。另外，当我尝试在名称集合中添加其他名称时，这不会在我的指令中显示在集合中。我的scope。$ watch（'collection'...）从未被调用过。
http://plnkr.co/edit/4vyZDAhBcbULEd3uIznh?p=preview
希望有人能帮忙
我做的事情我认为是相似的。让我知道是否以某种方式错过了重点。我有一个指令，可以根据远程数据进行ng-repeatd转换。运作方式如下。
更新资料
问题是页面标记中的模板。但是，如果希望ng-repeat模板存在于同一页面标记中，则可以执行以下操作：
<script type="text/ng-template" id="navbar.html">
<li ng-repeat="item in items" ng-class="{active: item.selected}">
<a href="/{{item.link}}">{{item.title}}</a>
</li>
</script>
不完全相同的东西，但是它具有与您相同的效果-与指令位于同一页上的模板-只是不嵌套。
更新结束
我在父范围和子范围中具有相同的数组：即$scope.items。因为是引用类型，所以通过原型继承，两个作用域都引用同一个对象。在不更新属性的位置，我按如下方式对其进行初始化$scope.items = $scope.items || [];-即，如果尚未初始化属性，则对其进行初始化，否则保留该属性。
directive('navbar', ['$location', '$http', function ($location, $http) {
return {
restrict: 'E',
transclude: true,
scope: { heading: '@'},
controller: 'NavbarCtrl',
templateUrl: 'navbar.html',
replace: true,
link: function ($scope, $element, $attrs, navbarCtrl) {
$scope.items = [];
$scope.heading = $scope.heading || $attrs.heading;
$http.get(itemsUrl).success(function(data) {
$scope.items = ... async get of data ... ;
navbarCtrl.selectByUrl($location.absUrl());
});
$scope.$watch('$location.absUrl()', function (locationPath) {
navbarCtrl.selectByUrl(locationPath)
});
}
}
}])
指令的$ watch调用控制器函数，并且该函数可以通过其闭包访问控制器$ scope。
function NavbarCtrl($scope, $timeout, $http, $location, $attrs) {
$scope.items = $scope.items || [];
this.select = $scope.select = function (item) {
angular.forEach($scope.items, function (item) {
item.selected = false;
});
item.selected = true;
};
this.selectByUrl = function (url) {
angular.forEach($scope.items, function (item) {
if ('http://' + item.link === url) {
$scope.select(item);
}
});
};
}
然后，在我包含的模板中，我有：
<li ng-repeat="item in items" ng-class="{active: item.selected}">
<a href="/{{item.link}}">{{item.title}}</a>
</li>
在页面标记中，我像这样使用它：
<div ng-controller="NavbarCtrl">
<navbar heading="Navbar Heading"/>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句