angularjs - निर्देश के आंशिक से एनजी-क्लिक कैसे खोलें?




angularjs-directive angularjs-ng-click (2)

आप निर्देशक से प्रत्यक्ष रूप से नियंत्रक के दायरे में परिभाषित changePage() एक्सेस नहीं कर सकते, क्योंकि आपके निर्देश का अलग-अलग क्षेत्र है। हालांकि, अब भी ऐसा करने के कई तरीके हैं:

विकल्प 1:

विकल्प 1 सबसे सरल विकल्प है I हालांकि यह एक समाधान के समान है और मैं इसे व्यापक रूप से उपयोग करने की अनुशंसा नहीं करता आप अपने कंट्रोलर का दायरा फंक्शन लिंक करने के लिए एलीमेंट से प्राप्त कर सकते हैं और वहां changePage सकते हैं।

link: function (scope, element, attrs, ctrl, transclude) {
    if (!attrs.title) scope.title = "Default title";
    scope.changePage = element.scope().changePage; // <= Get parent scope from element, it will have changePage()
}

विकल्प 2:

यदि आपके पास कोई तर्क नहीं है जिसमें बाहरी नियंत्रक (आपके उदाहरण के अनुसार) में परिभाषित दायरे शामिल हैं, तो आप अपने निर्देश के लिए आंतरिक नियंत्रक को परिभाषित कर सकते हैं और इसे वहां कर सकते हैं:

app.directive('plantStages', function ($compile) {
    return {
       ...
       controller: ['$scope', function($scope) {
           $scope.changePage = function(page) {
               var url = "corn.page.html#/"+page;
               console.log("Change page "+page+" with url "+url);
               alert("about to change page as follows: document.location.href = "+url);
           }
       }]
    };
});

विकल्प 3:

यदि आप अलग-अलग निर्देशों और नियंत्रकों में changePage() में परिभाषित पुन: उपयोग तर्क चाहते हैं, तो ऐसा करने का सबसे अच्छा तरीका तर्क को कुछ सेवा में स्थानांतरित करना है, जिसे नियंत्रक और निर्देश दोनों में इंजेक्ट किया जा सकता है:

app.service('changePageService', function() {
    this.changePage = function(page) {
        var url = "corn.page.html#/"+page;
        console.log("Change page "+page+" with url "+url);
        alert("about to change page as follows: document.location.href = "+url);
    }
});

app.controller('myCtrl', function ($scope, $location, $http, changePageService) {
    ...
    changePageService.changePage('page');
    ...
});

app.directive('plantStages', function ($compile) {
    ...
    controller: ['$scope', 'changePageService', function($scope, changePageService) {
        $scope.changePage = changePageService.changePage;
    }]
    ...
});

विकल्प 4:

आप कोड के टुकड़े को बदल सकते हैं जैसे कि changePage(page) निर्देश के कुछ विशेषता के मूल्य के रूप में और अंदर के changePage(page) '&' साथ गुंजाइश संपत्ति को परिभाषित करते हैं जो उस फ़ंक्शन को बनाएगा जो कि बाहरी नियंत्रक के दायरे में कार्यान्वित होगा, उदाहरण:

जावास्क्रिप्ट

app.directive('plantStages', function ($compile) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<figure class="cornStages">\
                        <p ng-transclude style="color: skyblue"></p>\
                        <hr/>\
                        <p ng-bind-html="title"></p>\
                        <p ng-bind-html="subtitle"></p>\
                        <ul>\
                            <li ng-repeat="stage in stages" ng-click="changePage({page: stage})">{{stage}}</li>\
                        </ul>\
                    </figure>',
        scope: {
            stages:"=",
            title:'@',
            changePage:'&'
        },
        link: function (scope, element, attrs, ctrl, transclude) {
            if (!attrs.title) scope.title = "Default title";
        }
    };
});

एचटीएमएल

<div ng-controller="myCtrl">
    Stages, 
    <p ng-repeat="stage in stages">{{stage}}</p>
    <hr/>
    Plant stages
    <plant-stages 
        title="<b>Exploration<br/>du cycle</b>"
        subtitle="<em>This is a<br/>sub title</em>"
        stages="stages"
        change-page="changePage(page)"
    >
        Inner<br/>directive
    </plant-stages>

प्लंकर: http://plnkr.co/edit/s4CFI3wxs0SOmZVhUkC4?p=preview

मेरे पास एक निर्देश है जिसमें एक स्थानीय क्षेत्र है जहां एक आंशिक एनजी-क्लिक शामिल है

द फिल्ड है: http://jsfiddle.net/stephanedeluca/QRZFs/13/

दुर्भाग्य से, जब से मैं अपना कोड डायरेक्टिव में चला गया, एनजी-क्लिक अब और आग नहीं करता।

नियंत्रक और निर्देश निम्नानुसार हैं:

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

app.directive('plantStages', function ($compile) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<figure class="cornStages">\
                        <p ng-transclude style="color: skyblue"></p>\
                        <hr/>\
                        <p ng-bind-html="title"></p>\
                        <p ng-bind-html="subtitle">{{subtitle}}</p>\
                        <ul>\
                            <li ng-repeat="stage in stages" ng-click="changePage(stage)">{{stage}}</li>\
                        </ul>\
                    </figure>',
        scope: {
            stages:"=",
            title:'@'
        },
        link: function (scope, element, attrs, ctrl, transclude) {
            if (!attrs.title) scope.title = "Default title";
        }
    };
});

app.controller('myCtrl', function ($scope, $location, $http) {
    $scope.stages = ['floraison', 'montaison'];
    $scope.changePage = function (page) {
        var url = "corn.page.html#/"+page;
        console.log("Change page "+page+" with url "+url);
        alert("about to change page as follows: document.location.href = "+url);
    };

});

यह कहते हुए एचटीएमएल निम्नानुसार है:

<div ng-controller="myCtrl">
    Stages, 
    <p ng-repeat="stage in stages">{{stage}}</p>
    <hr/>
    Plant stages
    <plant-stages 
        title="<b>Exploration<br/>du cycle</b>"
        subtitle="<em>This is a<br/>sub title</em>"
        stages="stages"
    >
        Inner<br/>directive
    </plant-stages>
</div>

कोई उपाय?


निर्देशों का विचार उन पुन: प्रयोज्य घटकों के रूप में व्यवहार करना है और जहाँ भी संभव हो वहां बाह्य निर्भरता से बचें। यदि आपके पास अपने निर्देशक के व्यवहार को अपने नियंत्रक में परिभाषित करने की संभावना है, तो इसे करें

module.directive('myDirective', function () {
  return {
    restrict: 'E',
    controller: function() { /* behaviour here */ },
    template: '<div>Directive Template</div>',
        scope: {
            /* directive scope */
        }
    };
});

यदि यह संभव नहीं है, तो आप फ़ंक्शन को पारित कर सकते हैं जैसा कि लिंक किए गए प्रश्न में बताया गया है (उपरोक्त टिप्पणी देखें)। अद्यतन बेला की जाँच करें।





angularjs-ng-click