Question

我正在从angularJs 1.2.17升级到1.2.18，并且有一些改变正在破坏我们使用角度的方式之一。我已经能够用jsFiddle重现这个问题。

我们做错了吗？是否有一个小的调整，使示例使用角度1.2.18？

JSFiddle 1.2.17（工作）：http://jsfiddle.net/HB7LU/8829/

JSFiddle 1.2.18（不工作）：http://jsfiddle.net/HB7LU/8828/

HTML

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-init="group = groups[0]">
            <div simple-checkbox></div>  
        </div>
        <div ng-init="group = groups[1]">
            <div image-checkbox></div>
        </div>          
    </div>
</body>

JS

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

function MyCtrl($scope) {
    $scope.groups = [{
        names: ['One', 'Two', 'Three']
    },{
        names: ['Four', 'Five', 'Six']
    }];
}

myApp.directive('simpleCheckbox', function() {
    return {
        scope: true,
        template: '<div checkbox>{{name}}</div>'
    };
});

myApp.directive('imageCheckbox', function() {
    return {
        scope: true,
        template: '<div checkbox><img ng-src="http://placekitten.com/g/10/10" /> {{name}}</div>'
    };
});

myApp.directive('checkbox', function() {
    return {
        scope: true,
        transclude: true,
        template: '<div ng-repeat="name in group.names"><input type="checkbox" id="{{name}}"><label for="{{name}}" ng-transclude></label></div></div>'
    };
});

Answer 1

我在这些问题中提供的帮助解决了这个问题：

https://github.com/angular/angular.js/issues/7842

https://github.com/angular/angular.js/issues/7874

使用Angular 1.2.18工作jsFiddle：

http://jsfiddle.net/HB7LU/8828/

HTML

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-init="group = groups[0]">
            <div simple-checkbox></div>  
        </div>
        <div ng-init="group = groups[1]">
            <div image-checkbox></div>
        </div>          
    </div>
</body>

魔术指令

myApp.directive('transcludeWithInsideScope', function () {
    return {
        link: {
            pre: function (scope, element, attr, ctrl, transclude) {
                if(transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            }
        }
    };
});

所有的JS

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

function MyCtrl($scope) {
    $scope.groups = [{
        names: ['One', 'Two', 'Three']
    },{
        names: ['Four', 'Five', 'Six']
    }];
}

myApp.directive('simpleCheckbox', function() {
    return {
        scope: true,
        template: '<div checkbox>{{name}}</div>'
    };
});

myApp.directive('imageCheckbox', function() {
    return {
        scope: true,
        template: '<div checkbox><img ng-src="http://placekitten.com/g/10/10" /> {{name}}</div>'
    };
});

myApp.directive('checkbox', function() {
    return {
        scope: true,
        transclude: true,
        template: '<div ng-repeat="name in group.names"><input type="checkbox" id="{{name}}"><label for="{{name}}" transclude-with-inside-scope></label></div></div>'
    };
});

myApp.directive('transcludeWithInsideScope', function () {
    return {
        link: {
            pre: function (scope, element, attr, ctrl, transclude) {
                if(transclude) {
                    transclude(scope, function (clone) {
                        element.append(clone);
                    });
                }
            }
        }
    };
});

Angular 1.2.17 - ＆gt; 1.2.18：ng-transclude in ng-repeat，范围差异

1 个答案: