javascript – 处理Angular范围而不是$parent的正确方法.$parent

前端之家收集整理的这篇文章主要介绍了javascript – 处理Angular范围而不是$parent的正确方法.$parent前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我一直在阅读一些文章,并没有找到解决我的问题的例子.

我的理解是:

> ng-if和ng-repeat创建隔离范围.
>使用$parent.someProperty是不好的.
>使用$parent.$parent.someProperty将是一种憎恶.

因此,使用给定的模板标记,如何正确绑定控制器以使控制器属性更新?

标记
(注意嵌套的ng-if和ng-repeat,创建一种$parent.$parent情况)

JavaScript的

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

myApp.controller('MyCtrl',function($scope) {
  $scope.settings = {
    someProperty: '',anotherProperty: 'Hello'
  }

  $scope.repeatingItems = [
    'One','Two','Three'
  ];

  $scope.showOnCondition = true;

  $scope.checkSetting = function() {
    // When calling checkSettings(),I would like to access the value of someProperty here
    return $scope.settings;
  }
});

myApp.directive('setting',function() {
  return {
    restrict: 'E',require: '^myCtrl',// HOW DO I SOLVE THIS?
    // $parent.$parent is bad.
    template: 'dio" ng-model="$parent.$parent.settings.someProperty" name="mySetting" value="{{item}}" />',scope: {
      settings: '=',item: '='
    }
  };
});

鉴于上面的例子,如何正确构造指令和/或标记,以便访问控制器中的settings.someProperty?或者我需要做些什么完全不同的事情?

澄清
关于我正在尝试做什么似乎有些混乱.指令中提供了someProperty – 工作正常.请注意我正在尝试从指令中为控制器的someProperty属性赋值(使用ng-model)

更新
我已将上面的代码修改为已知的工作代码,并添加jsFiddle.
请注意它可以工作,但它在模板中使用$parent.$parent.这是我需要了解如何解决的问题.

最佳答案
您可以将设置传递给指令,我认为这是最简单/最直接/最干净的方法.

Angular正确地将设置评估为MyCtrl.settings,然后将其传递给设置指令的隔离范围.在指令内部,您可以对设置进行双向绑定,因此您可以从那里更新设置.

修改您的示例,将设置传入标记中的指令:

< setting settings =“settings”item =“item”/>

然后在JavaScript中,将其替换为模板:

模板:’< input type =“radio”ng-model =“settings.someProperty”ng-value =“item”name =“mySetting”/>‘,

这是一个working fiddle.

猜你在找的JavaScript相关文章