angularjs：NG-重复内部指令和NG-类初始化 [英] angularjs : directive and ng-class initialization inside ng-repeat

问题描述

我有一个NG-类的初始化的问题，当我移动code这是在我的控制器，但涉及到DOM，一个指令。
要短，这里是一些code：

I have an ng-class initialization issue when I move the code which was in my controller, but related to the DOM, to a directive. To be short, here is some code:

view.html

<div ng-repeat="foo in foos" ng-click="rowClick($index)>
    <div ng-class="changeOpacity($index)>
        <span>{{foo.title}}</span>
        <span>{{foo.name}}</span>
        <span>{{foo.date}}</span>
        ...
        // some div with hidden content. Show when clicking on the div
    </div>
<div>

controller.js

$scope.rowClick = function (idx) {
    // unfold the clicked div to show content
};
$scope.changeOpacity = function (idx) {
    if (this is the div clicked) {
        return {dark: true};
    } else {
        return {light: true};
}

所以，当我有格的列表。当我点击一个div，其他所有的div变暗节选这一个。

So when I have a list of div. When I clicked on a div, all the other divs get darker excepts this one.

在$ scope.rowClick和$ scope.changeOpacity都在我的控制一切工作正常。

Everything is working fine when $scope.rowClick and $scope.changeOpacity are in my controller.

当我移动rowClick和changeOpcaity一个指令：

When I move rowClick and changeOpcaity to a directive:

myBar.js

myApp.directive('myBar', function () {
    ...
    return {
        restrict:'A',
        link: function (scope, element) {
           element.bind('click', function () {
               ...
               same code from rowClick
               ...
               scope.changeOpacity = function () {
                   ...
                   same code from changeOpacity
               }
               scope.$apply();
            }
        }),
        changeOpacity: function () {
            ...
            return {light: true} // for all divs
        }
    }
});

现在我的 view.html 是这样的事情：

Now my view.html is something like that:

<div ng-repeat="foo in foos" ng-click="rowClick($index) my-bar>
    <div ng-class="changeOpacity($index)>
        <span>{{foo.title}}</span>
        <span>{{foo.name}}</span>
        <span>{{foo.date}}</span>
        ...
        // some div with hidden content. Show when clicking on the div
    </div>
<div>

但现在的div都不再与纳克级初始化。我必须点击每个div一次对其进行初始化，与听点击链接功能。

But now the divs are not initialized anymore with the ng-class. I have to click one time on each div to initialize it, with the link function which listen to the click.

我怎么能初始化纳克级指令里面呢？

How can I initialize the ng-class inside the directive ?

感谢名单。

推荐答案

的问题是，你只点击后把 changeOpacity 功能在你的范围内。这样做在链接功能，而不是像这样：

The problem is that you are putting the changeOpacity function in your scope only after a click. Do it in the link function instead like this:

link: function (scope, element) {
    scope.changeOpacity = function () {
        ...
        same code from changeOpacity
    }
}

使之成为指令对象的字段没有影响。

making it a field of the "directive object" has no effect.

不过，在我看来，这将是更优雅的使用模式属性，以指示该元素处于活动状态，并在 NG-点击属性更改该属性。然后，您可以参考这个属性在纳克级指令。

However, in my opinion it would be more elegant to use a model property to indicate if the element is active or not and change this property in an ng-click attribute. You can then refer to this property in the ng-class directive.

事情是这样的：

<div ng-repeat="foo in foos" ng-click="foo.active = true>
    <div ng-class="{light: active, dark: !active }>
        <span>{{foo.title}}</span>
        <span>{{foo.name}}</span>
        <span>{{foo.date}}</span>
        <div ng-show="foo.active">
            // some div with hidden content. Show when clicking on the div
        </div>
</div>

这篇关于angularjs：NG-重复内部指令和NG-类初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！