يجري ملفوفة التوجيه, كيف يمكنني الوصول إلى نطاقه ؟

Question

كيف يمكنني الوصول إلى التوجيه عزل نطاق في التوجيه ؟ بلدي دوم يبدو مثل هذا:

<div ng-app="app">    
    <directive>
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

على boolProperty يتم تعيين داخل التوجيه link وظيفة:

angular.module("app", []).directive("directive", function() {
    return {
        scope: {},
        link: function($scope) {
            $scope.boolProperty = true;
        }
    };
});

المشكلة أن الطفل <p> داخل التوجيه يربط التوجيه الأم نطاق ، وليس التوجيه نطاق معزولة.كيف يمكنني التغلب على هذا ؟

انقر هنا للحصول على jsFiddle.

Answer 1

كنت قد نسيت حول أمرين:

1. بشكل افتراضي AngularJS يستخدم attrubute التقييد ، وذلك في القضية في التوجيه التعريف يجب تحديد restrict: "E"
2. يجب عليك استخدام الطفل نطاق ، ولكن ليس معزولا.لذلك وضع scope: true وراثة من الوالد نطاق الرأي.

انظر تحديث كمان http://jsfiddle.net/Y9g4q/1/.

حظا سعيدا.

Answer 2

هناك بعض المشاكل في التعليمات البرمجية الخاصة بك.

1. الافتراضي تقييد الخيار A للسمة بأي حال التوجيه الخاص بك لن تكون جمعت لأنك تستخدم كعنصر.استخدام restrict: 'E' أن تجعل من العمل.

2. حسب الوثائق نطاق transcluded عنصر ليس الطفل نطاق التوجيه ولكن أخ واحد.لذلك boolProperty سوف دائما تكون غير محددة أو فارغة.لذلك عليك أن تذهب نطاق المستوى والعثور على المناسبة الأخوة.

   <div ng-app="app">
      <directive>
       <p>boolProperty: {{$parent.$$childHead.boolProperty}}</p>
       </directive>
   </div>
   

وتحتاج إلى استخدام transclusion في التوجيه:

angular.module("app", []).directive("directive", function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function(scope) {
            scope.boolProperty = true;
        }
    };
});

ومع ذلك ، فإن هذا النهج ليس من المستحسن وكسر في وقت لاحق إذا قمت بإضافة وحدة تحكم جديدة قبل التوجيه لأن transcluded نطاق يصبح 2nd الأخوة خلافا 1 كما كان من قبل.

<div ng-app="app">
    <div ng-controller="OneCtrl"></div>
    <directive>
        <p>boolProperty: {{$parent.$$childHead.boolProperty || $parent.$$childHead.$$nextSibling.boolProperty}}</p>
    </directive>
</div>

هنا العمل التجريبي.النهج التي ذكرتها ليست مثالية لذلك استخدام على مسؤوليتك الخاصة.@في CodeHater' s الجواب هو واحد يجب عليك أن تذهب مع.أردت فقط أن أشرح لماذا لم يعمل بالنسبة لك.

Answer 3

من مستندات:

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

يبدو أنك تحتاج إلى إضافة صراحة boolProperty إلى scope.

<div ng-app="app" ng-controller="ctrl">    
    <directive bool="boolProperty">
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

JS

angular.module("app", []).controller("ctrl",function($scope){
    $scope.boolProperty = false;
}).directive("directive", function() {
    return {
        restrict:"E",
        scope: {boolProperty:'=bool'},
        link: function($scope) {
            $scope.boolProperty = "i'm a boolean property";
        }
    };
});

هنا تحديث كمان.