Question

在没有隔离范围的情况下，将数据传递回Angular中的父作用域的首选方法是什么？

鉴于我有一个指令x，并想知道它的值a，我想做的事情如下：

<x a="some.obj.myA"></x>
current a: {{some.obj.myA}}

我会像这样定义x指令：

app.directive('x', function() {
    var a = {};
    return {
        restrict: 'E',
        link: function($scope, $element, $attrs) {
            var parentExpression = $attrs.a;

            // ???
        },
        replace: true,
        template: ...
    };
});

现在，我总是希望保持＆＃34; $scope.$parent[parentExpression]＆＃34; （伪代码）等于本地a的值。但是，如果parentExpression引用嵌套对象，数组或任何其他类型的可赋值表达式，这甚至可以工作。

我怎么能这样做呢？

Answer 1

多个选项：

使用ng-model

示例：

app.directive('x', function() {
  var a = {};
  return {
    require:'ngModel', //require it, you can make it options as well with ?
    restrict: 'E',
    link: function($scope, $element, $attrs, ctrl) {
       var currentValue = ctrl.$viewValue;
       //... do something with the value and then set it back
       ctrl.$setViewValue(newValue);
       ctrl.$render();
    },
    replace: true,
    template: ...
  };
});

<x ng-model="some.obj.myA"></x>

如果您的指令旨在更改模态的值，那么您也可能正在查看$formatters/$parsers。如果您打算观看视图值更改，请查看$viewChangeListeners。

 angular.module('app', []).directive('x', function() {
   var a = {};
   return {
     require: 'ngModel', //require it, you can make it options as well with ?
     restrict: 'E',
     link: function($scope, $element, $attrs, ctrl) {
       //override render function
       ctrl.$render = function() {
         var currentValue = ctrl.$viewValue;
         console.log(currentValue);
         //... do something with the value and then set it back
         ctrl.$setViewValue(currentValue + "Updated");
       };
     },
     replace: true,

   };
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="some={obj:{myA:'hey'}}">
  {{some.obj.myA}}
  <x ng-model="some.obj.myA"></x>
</div>

使用$parse

使用$ parse服务并从表达式创建getter和setter并更新回来。在这里，您可以使用多个属性绑定。

示例：

   link: function($scope, $element, $attrs) {
       var getA = $parse($attrs.a);
       var setA = getter.assign; 
       var currentValue = getter($scope);
       //... update to new value and set it back
       setA ($scope, currentValue  + "Updated")
     },

angular.module('app', []).directive('x', ['$parse', function($parse) {
   var a = {};
   return {
     restrict: 'E',
     link: function($scope, $element, $attrs) {
       var getter = $parse($attrs.a);
       var setter = getter.assign;
       console.log(getter($scope),setter($scope, "Updated"));
     },
     replace: true,

   };
 }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="some={obj:{myA:'hey'}}">
  {{some.obj.myA}}
  <x a="some.obj.myA"></x>
</div>

将值绑定并写入父作用域，而不使用指令

1 个答案: