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示波器

回答

相關問題