Angular-styleguide: ممارسة جيدة للوصول إلى خصائص وحدة تحكم الوالدين

تم إنشاؤها على ٢٨ يوليو ٢٠١٥ · 13تعليقات · مصدر: johnpapa/angular-styleguide

باستخدام بناء الجملة controllerAs ، ما هي الممارسة الجيدة للوصول / تعديل الخصائص البسيطة لوحدة التحكم الرئيسية؟ يرجى الاطلاع على المثال أدناه. لا أحب الوصول إليهم عبر $scope.$parent.parent . كيف تتصرفون يا رفاق في مواقف مماثلة دون إنشاء خدمة لمثل هذا المنطق التافه.

<div ng-controller="Parent as parent">

  <div ng-if="parent.showMessage">
    Some simple message.
  </div>

  <div ng-controller="ChildOne as childOne"></div>

</div>

app.controller('Parent', function () {
    var self = this;
    self.showMessage = true;
});

app.controller('ChildOne', function ($scope) {
    var self = this;
    self.foo = 'bar';
    // Some simple logic.
    if (self.foo === 'bar') {
        $scope.$parent.parent.showMessage = false;
    }
});

question

مصدر

Bekt

👍20 😄2

التعليق الأكثر فائدة

باستخدام نهج أكثر تركيزًا على المكونات:

<html ng-app="myApp">
  <body>
    <div ng-controller="ParentCtrl as vm">
      <my-directive on-foo-eq-bar="vm.updateMessage(msg)"></my-directive>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
        .controller('ParentCtrl', function($window) {
          var vm = this;
          vm.updateMessage = function(msg) {
            $window.alert(msg);
          };
        })
        .directive('myDirective', function() {
          return {
            scope: {
              onFooEqBar:'&'
            },
            controllerAs:'vm',
            controller: function($scope) {
              var self = this;
              self.foo = 'bar';
              // Some simple logic.
              if (self.foo === 'bar') {
                $scope.onFooEqBar({msg: false});
              }
            }
          };
        });
    </script>
  </body>
</html>

leandrocosta في ٣٠ يوليو ٢٠١٥

👍10 ❤4

ال 13 كومينتر

هل يمكنك إعطاء مثال حقيقي؟ لا يمكنني التفكير إلا في المواقف التي يعرف فيها الوالد بالفعل الكائن الذي سيستخدمه / يعدله المتحكمون التابعون ، وأنك تعطي هذا الكائن إلى وحدات التحكم التابعة من خلال نموذج البيانات. إذا قمت بذلك ، يمكن لوحدة التحكم الرئيسية الوصول إلى الكائن. بهذه الطريقة ، لا يحتاج المتحكمون لديك إلى معرفة بعضهم البعض أو معرفة نطاق بعضهم البعض.

أم أنك تفعل شيئًا مختلفًا عما أعتقده؟

dietergeerts في ٢٨ يوليو ٢٠١٥

👍3

dietergeerts شكرا

أحتاج أساسًا إلى إظهار div الأول إذا كان بعض المنطق البسيط صحيحًا في الطفل.

(ChildOne مرتبط بطريق ، لذا لا يمكنني لصق أول div في الطفل)

Bekt في ٢٨ يوليو ٢٠١٥

Bekt ، يمكن أن يكون لها هذا التأثير ، حيث يمكن أن تكون data-ng-if = "parent.object.property == 'some_value'" ، بالطبع اعتمادًا على ماهية المنطق ومدى تعقيد هذا المنطق.

إذا تم تعيينهما من خلال المسارات باستخدام جهاز توجيه ui ، وهما مسارات فرعية ، فيمكن لكليهما استخدام الكائن.

بشكل عام ، إنها فكرة سيئة للغاية أن تطلب من الوالد شيئًا ما ، لأن هذا يعني أن وحدة التحكم ليست قائمة بذاتها ، وهو ما يحتاجون إليه. عادة ما تكون هناك طريقة أفضل بكثير للقيام بمثل هذا "التواصل". لهذا السبب كنت أسأل عن الموقف الفعلي الذي لديك ، حيث يمكن أن تكون هناك طرق أفضل لفعل ما تريد.

dietergeerts في ٢٩ يوليو ٢٠١٥

🎉1 👍1

أحب إبقاء الأشياء منفصلة. ولكن هناك القليل من المطلقات ... بشكل عام توجيهاتي ، والمراقبين لدي ، وخدماتي ... أحب أن تكون مستقلة بذاتها ، وإذا كانت بحاجة إلى جوانب خارجية ، فأنا أحقنها أو ألزمها. لا أحب الاعتماد على شيء ما لاستخدامه في سياق معين. منطقي؟

johnpapa في ٣٠ يوليو ٢٠١٥

👍3

أود حل هذا الأمر التوجيهي لتغليف وحدة التحكم التابعة للطفل ، مثل هذا:

<div ng-controller="Parent as parent">

  <div ng-if="parent.showMessage">
    Some simple message.
  </div>

  <div child-one parent="parent"></div>

</div>

app.controller('Parent', function () {
    var self = this;
    self.showMessage = true;
});

app.directive('childOne', function() {
    return {
        controllerAs: 'childOne',
        controller: function($scope, $attrs) {
            var parent = $scope.$eval($attrs.parent);

            var self = this;
            self.foo = 'bar';
            // Some simple logic.
            if (self.foo === 'bar') {
                parent.showMessage = false;
            }
        }
    };
});

أو لاستخدام ng-init الموجود على contoller الثاني.

<div ng-controller="ChildOne as childOne" ng-init="childOne.setParent(parent)"></div>

dbabaioff في ٣٠ يوليو ٢٠١٥

باستخدام نهج أكثر تركيزًا على المكونات:

<html ng-app="myApp">
  <body>
    <div ng-controller="ParentCtrl as vm">
      <my-directive on-foo-eq-bar="vm.updateMessage(msg)"></my-directive>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
        .controller('ParentCtrl', function($window) {
          var vm = this;
          vm.updateMessage = function(msg) {
            $window.alert(msg);
          };
        })
        .directive('myDirective', function() {
          return {
            scope: {
              onFooEqBar:'&'
            },
            controllerAs:'vm',
            controller: function($scope) {
              var self = this;
              self.foo = 'bar';
              // Some simple logic.
              if (self.foo === 'bar') {
                $scope.onFooEqBar({msg: false});
              }
            }
          };
        });
    </script>
  </body>
</html>

leandrocosta في ٣٠ يوليو ٢٠١٥

👍10 ❤4

dbabaioffleandrocosta: شكرا، اقتراحات مثيرة للاهتمام.

انتهى بي الأمر مع $on على الوالد و $broadcast على الأطفال.

Bekt في ٣٠ يوليو ٢٠١٥

👍3

محادثة جيدة ، ولكن لا شيء تضيفه هنا إلى الدليل ، IMO

johnpapa في ٦ أغسطس ٢٠١٥

: +1:

Bekt في ٦ أغسطس ٢٠١٥

في وحدة التحكم الرئيسية الخاصة بك ، اشترك في حدث على $ rootScope

$rootScope.$on('myEvent', function(data){/*do something*/})

ثم في الطفل ، أطلق الحدث باستخدام $ rootScope

$rootScope.$emit('myEvent', someData);

danielkereama في ٢٤ يناير ٢٠١٨

Imho ، من الأفضل أن يكون لديك مكونان بدلاً من وحدات التحكم ، وأن تضخ الخصائص في المكون الفرعي إذا لزم الأمر ، وإذا كنت تريد تعيينها ، فاخرج شيئًا من الطفل إلى الوالد. أكثر كفاءة بكثير وأسهل في التفكير حول + أسهل في اختبار الوحدة.

لم يعد استخدام $ rootScope والحدث موجودًا في الوقت الحاضر.

dietergeerts في ٢٤ يناير ٢٠١٨

👍1

يمكنك التحقق مما إذا كانت الخاصية موجودة ثم تعيين القيمة كما هو موضح أدناه ..

إذا (النطاق $. parent.showMessage) {
var الأصل = النطاق $. $ parent؛
while (! parent.hasOwnProperty ('showMessage')) {
الوالد = الوالد ['$ parent'] ؛
}
parent.showMessage = خطأ ؛
}

anurag1209 في ١٥ نوفمبر ٢٠١٨

👎1

آسف على ذلك ، ولكن في حالة وصول أي شخص آخر إلى هنا ، سيكون الحل هو تحويل وحدة التحكم التابعة مباشرة إلى مكون ، ثم ربط وظيفة تحديث من الوالد إلى الطفل ، على النحو التالي:

<div ng-controller="Parent as parent">

  <div ng-if="parent.showMessage">
    Some simple message.
  </div>

  <child-one update-parent="parent.showMessage = value"></child-one>

</div>

app.controller('Parent', function () {
    var self = this;
    self.showMessage = true;
});

app.component('childOne', /* component def stuff including updateParent: '&' in bindings */);

function childOneController() {
    var self = this;
    self.foo = 'bar';
    // Some simple logic.
    if (self.foo === 'bar') {
        self.updateParent({value: false});
    }
});