将范围更改从Angular 1.1隔离到1.2

Angular N00b here, I'm having some with a isolate scope directives. I created a JS Fiddle to show the issue, but the strange part is that it seems to be working as intended in Angular v1.1, however in 1.2+ it doesn't work.

Angular N00b在这里,我有一些使用隔离范围指令。我创建了一个JS Fiddle来展示这个问题,但奇怪的是它似乎在Angular v1.1中按预期工作,但在1.2+中它不起作用。

Essentially, I'm trying to create isolate scope directives, each of which has html within the directive's content itself. You'll see in the ng-show attribute I'm trying to call the isActive method on the directives with isolated scope, however that method is never fired for angular 1.2+

本质上,我正在尝试创建隔离范围指令,每个指令在指令的内容本身中都有html。您将在ng-show属性中看到我试图在具有隔离范围的指令上调用isActive方法,但是对于角度为1.2+的方法永远不会触发该方法

I'm sure I have the isolate scope stuff configured incorrectly, still trying to wrap my head around it.

我确定我的隔离范围配置不正确,仍然试图绕过它。

Thanks!

var app = angular.module('myApp', []);

app.directive('stage', function () {
    return {
        restrict: 'A',
        controller: ['$scope', '$sectionService', function ($scope, $sectionService) {

            // doesn't do much yet

        }],
    };
});

app.directive('section', function () {
    return {
        restrict: 'A',
        scope: {
            sectionIndex: '=section'
        },
        controller: ['$scope', '$sectionService', function ($scope, $sectionService) {

            $scope.isActive = function () {
                console.log("is active", $sectionService.activeSection, $scope.sectionIndex);
                return $sectionService.activeSection == $scope.sectionIndex;
            };

        }],
    };
});

app.factory('$sectionService', function () {
    return {
        activeSection: 0
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<body ng-app="myApp">
<div stage>
    <div section='0' ng-show='isActive()'>This is my first section</div>
    <div section='1' ng-show='isActive()'>This is my second section</div>
</div>
</body>

Update: Wow sorry guys, I included the wrong Fiddle. That one should work.

更新:哇抱歉,我包括错误的小提琴。那一个应该工作。

2 个解决方案

#1

Due to this breaking change in version 1.2, we can't access child's isolated scope in parent template.

由于版本1.2中的这一重大更改,我们无法在父模板中访问子级的隔离范围。

Options:

pull out the element that requires child's isolated scope variable from parent template to child(directive).

将需要子级隔离范围变量的元素从父模板拉出到子级(指令)。

If you think the element which calls isActive() should belong to parent, then don't create a isolate scope.

如果您认为调用isActive()的元素应属于父元素,则不要创建隔离范围。

#2

I think you can simplify the code using element and showing or hiding the section when you want adding or removing the ng-class (css class that angular adds when it hides an element).

我想你可以使用元素简化代码,并在你想要添加或删除ng-class时显示或隐藏该部分(当隐藏元素时angular添加的css类)。

app.directive('section', function ($sectionService) {
    return {
        restrict: 'A',
        scope: {
            sectionIndex: '=section'
        },
        link: function(scope,element,attr){
          $sectionService.activeSection !== scope.sectionIndex ? element.addClass('ng-hide') :
 element.removeClass('ng-hide');
        }
    };
});

Complete code: http://plnkr.co/edit/PnQHN99TgmviLrenG5Zd

完整代码:http://plnkr.co/edit/PnQHN99TgmviLrenG5Zd

#1