创建angularjs容器指令 [英] Create a container directive in angularjs

问题描述

所以我想创造一个指令，该指令将在列布局项目的集合。
在plunker我有只使用一个单个UL一个极其简化版本，但是这并不重要。我想该指令被称为等。

So I'm trying to create a directive that will layout a collection of items in columns. In the plunker I have a extremely simplified version which only uses a single ul, but that is not important. I want the directive to be called like .

<my-column-layout collection="names">
    <tab name="{{ item }}"></tab>
</my-column-layout>

我想使用的内HTML（这里的标签），为集合中的每个项目的模板。我想只是
有NG-重复在我的列布局模板像

I want to use the inner html (the tab here) as a template for each item in the collection. I tried to just have a ng-repeat in the my-column-layout template like

template : '<ul><li ng-repeat="item in collection" ng-transclude></li></ul>

这工作，但它没有能够访问包含控制器范围，所以我不能有标签上的任何点击事件并调用它在控制器的一个功能。
所以，我想我用transclude，但不能确定航向的正确方向。此外，当我尝试一些其他的名称添加到名称的集合，那么这并不在我的指令集合中显示出来。我的范围。$腕表（'收集'...）永远不会被调用。

which worked but it didnt have access to the containing controllers scope, so I couldn't have any click events on the tab and have it call an function in the controller. So i think I am heading the right direction with using transclude but not sure. Also when I try to add some other name to the collection of names, then this doesnt show up in the collection in my directive. My scope.$watch('collection' ...) is never called.

http://plnkr.co/edit/4vyZDAhBcbULEd3uIznh?p=$p$ PVIEW

希望有人能帮助

推荐答案

我这样做，我认为类似的东西。让我知道如果我莫名其妙地错过了点。我有一个指令，做基于远程数据transcluded NG重复。下面是它如何工作的。

I do something that I think is similar. Let me know if I've somehow missed the point. I have a directive that does a transcluded ng-repeat based on remote data. Here's how it works.

更新

这是在页面的标记这就是问题的模板。但是，如果你想要的NG-重复模板在同一页面标记存在，你可以这样做：

It's the template in the page markup that's the issue. However, if you want the ng-repeat template to exist on the same page markup, you can do this:

<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>

不完全是一回事，但它得到是你同样的效果 - 在同一页的指令模板 - 只是没有嵌套与它

Not exactly the same thing, but it get's you the same effect - template on the same page as the directive - just not nested with it.

更新结束

我在家长和孩子范围相同的数组：即 $ scope.items 。因为它是一个引用类型，通过原型继承，无论是范围引用同一个对象。在不更新属性的位置，我初始化像这样 $ scope.items = $ scope.items || []; - 即如果属性尚未初始化，初始化，否则把它

I have the same array in the parent and the child scopes: i.e. $scope.items. Because it's a reference type, through prototypical inheritance, both scopes reference the same object. In the location that doesn't update the property, I initialize it like this $scope.items = $scope.items || []; -- i.e. if the property hasn't been initialized, initialize it, otherwise keep it.

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)
            });
        }
    }
}])

该指令的$手表调用控制器功能，而该功能通过其关闭访问控制器范围$

The directive's $watch calls a controller function, and that function has access to the controller $scope through its closure.

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);
            }
        });
    };
}

然后，在我的模板，我transclude，我有：

Then, in my template, which I transclude, I have:

<li ng-repeat="item in items" ng-class="{active: item.selected}">
    <a href="/{{item.link}}">{{item.title}}</a>
</li>

在页面标记，我用它是这样的：

In the page markup, I use it like this:

<div ng-controller="NavbarCtrl">
    <navbar heading="Navbar Heading"/>
</div>

这篇关于创建angularjs容器指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！