AngularJS示波器

我有一个奇怪的角度范围混合的情况。这里是plnkr：http://plnkr.co/edit/o8cyZXkHX8Lt9Vkbn0xm AngularJS示波器

跨越的范围不能解决appCtrl.testString，这很奇怪，因为跨越的内容应该有外部的范围。更奇怪的是，num得到正确解决。

另外，data-test-attr获得了所述元素上的正确值ng-controller定义。

这是一个最小的工作示例，所以与重新排序的元素或在不同的地方定义范围的解决方案并不非常适合我。无论如何，我宁愿破解repeatedDirective，如果这是可能的话。

下面的代码：

index.html

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}"> 
     <div>{{num}} - {{appCtrl.testString}}</div> 
    </repeated-directive> 
    </body> 

</html>

script.js

angular.module('app', []) 
    .controller('AppController', AppController) 
    .directive('repeatedDirective', repeatedDirective); 

function AppController($scope) { 
    this.testString = 'Controller value'; 
} 

function repeatedDirective() { 
    return { 
    transclude: true, 
    template: '<div ng-transclude></div>' 
    }; 
}

来源

2015-08-27 Paulius K.

您的控制器是不是在你的指令范围：

这个修复它，而无需在HTML改变任何东西：

angular.module('app', []) 
    .controller('AppController', AppController) 
    .directive('repeatedDirective', repeatedDirective); 

function AppController($scope) { 
    this.testString = 'Controller value'; 
} 

function repeatedDirective() { 
    return { 
    transclude: true, 
    template: '<div></div>', 
    link: function(scope, element, attrs, ctrl, transclude) { 
     transclude(scope, function(clone, scope) { 
     element.append(clone); 
     }); 
    } 
    }; 
}

http://plnkr.co/edit/LsRfyw98f4BP4G72Bgd6?p=preview

这样你的transclusion不使用as操作范围，但需要控制器的范围。

é瞧

上究竟正在发生的事情，我会包括一个参考博客的更多信息：

http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

来源

2015-08-27 14:45:32

在您ng-repeat，你有你和[1, 2, 3, 4, 5]范围不是这解释的testString空值（appCtrl实际上它是未知的）。您应该访问$parent以便能够拥有您的appCtrl范围。

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}"> 
     <div>{{num}} - {{$parent.appCtrl.testString}}</div> 
    </repeated-directive> 
    </body> 

</html>

http://plnkr.co/edit/qc3j0nsJZKypXSsqMEqx

来源

2015-08-27 14:43:50

AngularJS示波器

回答

相关问题