कोणीय यूआई मोडल के साथ स्कोप मुद्दे

Question 1

मुझे कोणीय यूआई मोडल के लिए स्कोप को समझने / उपयोग करने में परेशानी हो रही है।

यहां तुरंत स्पष्ट नहीं होने के दौरान, मेरे पास मॉड्यूल और सब कुछ सही तरीके से सेट है (जहां तक मैं बता सकता हूं), लेकिन विशेष रूप से ये कोड नमूने हैं जहां मैं बग ढूंढ रहा हूं।

index.html (इसका महत्वपूर्ण भाग)

<div class="btn-group">
    <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
        Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right text-left">
        <li><a ng-click="addSimpleGroup()">Add Simple</a></li>
        <li><a ng-click="open()">Add Custom</a></li>
        <li class="divider"></li>
        <li><a ng-click="doBulkDelete()">Remove Selected</a></li>
    </ul>
</div>

नियंत्रक (js) (फिर से, महत्वपूर्ण हिस्सा)

MyApp.controller('AppListCtrl', function($scope, $modal){
    $scope.name = 'New Name';
    $scope.groupType = 'New Type';

    $scope.open = function(){
        var modalInstance = $modal.open({
            templateUrl: 'partials/create.html',
            controller: 'AppCreateCtrl'
        });
        modalInstance.result.then(function(response){

            // outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
            // despite the user entering customized values
            console.log('response', response);

            // outputs "New Name", which is fine, makes sense to me.                
            console.log('name', $scope.name);

        });
    };
});

MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
    $scope.name = 'Custom Name';
    $scope.groupType = 'Custom Type';

    $scope.ok = function(){

        // outputs 'Custom Name' despite user entering "TEST 1"
        console.log('create name', $scope.name);

        // outputs 'Custom Type' despite user entering "TEST 2"
        console.log('create type', $scope.groupType);

        // outputs the $scope for AppCreateCtrl but name and groupType
        // still show as "Custom Name" and "Custom Type"
        // $scope.$id is "007"
        console.log('scope', $scope);

        // outputs what looks like the scope, but in this object the
        // values for name and groupType are "TEST 1" and "TEST 2" as expected.
        // this.$id is set to "009" so this != $scope
        console.log('this', this);

        // based on what modalInstance.result.then() is saying,
        // the values that are in this object are the original $scope ones
        // not the ones the user has just entered in the UI. no data binding?
        $modalInstance.close({
            name: $scope.name,
            groupType: $scope.groupType
        });
    };
});

create.html (इसकी संपूर्णता में)

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">x</button>
    <h3 id="myModalLabel">Add Template Group</h3>
</div>
<div class="modal-body">
    <form>
        <fieldset>
            <label for="name">Group Name:</label>
            <input type="text" name="name" ng-model="name" />           
            <label for="groupType">Group Type:</label>
            <input type="text" name="groupType" ng-model="groupType" />
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="ok()">Add</button>
</div>

तो, मेरा सवाल यह है: यूआई के लिए गुंजाइश दोगुनी क्यों नहीं है? और क्यों thisअनुकूलित मान है, लेकिन $scopeनहीं करता है?

मैंने ng-controller="AppCreateCtrl"create.html में बॉडी डी.वी.

इस बिंदु पर, मेरी ही एकमात्र विकल्प के साथ एक वस्तु वापस पारित करने के लिए है this.nameऔर this.groupTypeउपयोग करने के बजाय $scope, लेकिन यह गलत लगता है।

Question 2

मुझे इस तरह से काम करने का मौका मिला:

var modalInstance = $modal.open({
  templateUrl: 'partials/create.html',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this
});

कोई रूप नाम नहीं, नहीं $parent। मैं AngularUI बूटस्ट्रैप संस्करण 0.12.1 का उपयोग कर रहा हूं।

मैं इसके द्वारा इस समाधान के लिए इत्तला दे दी गई थी ।

Question 3

जब नेस्टेड स्कोप शामिल होते हैं, तो <input>सीधे दायरे के सदस्यों से बंधे नहीं होते हैं :

<input ng-model="name" /> <!-- NO -->

उन्हें कम से कम एक गहरे स्तर तक बांधें:

<input ng-model="form.name" /> <!-- YES -->

इसका कारण यह है कि स्कोप्स मूल रूप से अपने मूल दायरे को विरासत में लेते हैं। इसलिए 1 स्तर के सदस्यों को सेट करते समय, ये सीधे माता-पिता को प्रभावित किए बिना, बच्चे के दायरे में सेट किए जाते हैं। इसके विपरीत, जब नेस्टेड फ़ील्ड ( form.name) में सदस्य formको पैरेंट स्कोप से पढ़ा जाता है, तो nameप्रॉपर्टी को एक्सेस करना सही लक्ष्य तक पहुंच जाता है।

अधिक विस्तृत विवरण यहां पढ़ें ।

Question 4

अद्यतन नवंबर 2014 :

वास्तव में आपके कोड को ui-बूटस्ट्रैप 0.12.0 में अपग्रेड करने के बाद काम करना चाहिए। ट्रांसकोड किए गए स्कोप को कंट्रोलर के स्कोप के साथ मिला दिया जाता है ताकि किसी सामान $parentया form.सामान की जरूरत न पड़े ।

0.12.0 से पहले :

अपनी सामग्री सम्मिलित करने के लिए मोडल ट्रांसकॉर्पोरेशन का उपयोग करता है। आपके लिए धन्यवाद विशेषता ngFormद्वारा गुंजाइश को नियंत्रित कर सकता है name। इसलिए ट्रांसकोड किए गए दायरे से बचने के लिए बस फॉर्म को इस तरह से संशोधित करें:

<form name="$parent">

या

<form name="$parent.myFormData">

मॉडल डेटा नियंत्रक दायरे में उपलब्ध होगा।

Question 5

$scope.open = function () {

          var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'myModalContent.html',
              controller: 'salespersonReportController',
              //size: size
              scope: $scope
            });

      };

यह मेरे लिए काम करता है गुंजाइश: $ गुंजाइश धन्यवाद यू जेसन Swett

Question 6

मैं गुंजाइश जोड़: $ गुंजाइश तो यह काम करता है। कूल