AngularJS指令-限制：'；A'；并将该指令设置为一个值_Angularjs_Angularjs Directive

AngularJS指令-限制：'；A'；并将该指令设置为一个值

angularjs

AngularJS指令-限制：'；A'；并将该指令设置为一个值,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我知道这可能是某种复制品，但我真的不知道如何说出我在寻找什么。所以我创建了一个限制为属性的指令。我只是想知道如何允许指令本身被设置为等于一个值。然后在链接函数中使用该值例如：假设我有一个名为“myDirective”的指令，它被限制为一个属性。我想知道我怎样才能做这样的事情 <input type="text" my-directive="vm.someValue" /> 并且能够在指令的link函数中访问该值。我知道我可以通过scope属性将一个新属性附加到指令，但是这个解

我知道这可能是某种复制品，但我真的不知道如何说出我在寻找什么。所以我创建了一个限制为属性的指令。我只是想知道如何允许指令本身被设置为等于一个值。然后在链接函数中使用该值

例如：假设我有一个名为“myDirective”的指令，它被限制为一个属性。我想知道我怎样才能做这样的事情

<input type="text" my-directive="vm.someValue" />

并且能够在指令的link函数中访问该值。我知道我可以通过scope属性将一个新属性附加到指令，但是这个解决方案对我来说似乎更简洁，因为我只需要一个值。

您可以通过l的参数访问该属性

在您的情况下，您可以询问

myDirective

我创建了一个在控制器内部使用绑定和ngModel的示例，并将函数链接到一起以使用属性

并尝试修改输入的值

注意：attrs.$observe（）用于监视插值属性。这意味着在您有

的情况下监视更改。因此，在所附的示例中，不会触发回调，因为DOM属性值不会因插值而更改

注意：绑定也提供不同的行为，如

（获取字符串值）、

（双向数据绑定）、

$scope.prop1，（）=>{
log（`controller-scope-$scope.prop2，（）=>{
log（`controller-scope-=myDirective-${$scope.prop2}[${typeof（$scope.prop2）}]`）；
});
$scope.$watch（（）=>$scope.prop3，（）=>{
log（`controller-scope-@myDirective-${$scope.prop3}[${typeof（$scope.prop3）}]`）；
});
$scope.$watch（（）=>$scope.ngModelProp，（）=>{
log（`controller-scope-ngModel-${$scope.ngModelProp}[${typeof（$scope.ngModelProp）}]`）；
});
},
controllerAs:'ctrl'，
链接：函数（$scope、element、attrs、ngModel）{
$scope.$watch（（）=>$scope.prop1，（）=>{
log（`link-scope-$scope.prop2，（）=>{
log（`link-scope-=myDirective-${$scope.prop2}[${typeof（$scope.prop2）}]`）；
});
$scope.$watch（（）=>$scope.prop3，（）=>{
log（`link-scope-@myDirective-${$scope.prop3}[${typeof（$scope.prop3）}]`）；
});
$scope.$watch（（）=>$scope.ngModelProp，（）=>{
log（`link-scope-ngModel-${$scope.ngModelProp}[${typeof（$scope.ngModelProp）}]`）；
log（`link-NgModelController-${ngModel.$modelValue}[${typeof（ngModel.$modelValue）}]`）；
});
$scope.$watch（（）=>element.attr（'my-directive'），（）=>{
log（`link-element-${element.attr（'my-directive'）}[${typeof（element.attr（'my-directive'））}]`）；
});
属性$observe（'myDirective'，（）=>{
log（`link-attrs-${attrs.myDirective}[${typeof（attrs.myDirective）}]`）；
});
}
}
});

您尝试了$element.attr（'my-directive'）？哦，我一直尝试从$attrs开始。谢谢！我明白了，也感谢其他设置和观察值的示例！这。$observe示例可能为我节省了很多额外的麻烦：）感谢您的清晰！这是一个非常深入的示例，它向我展示了许多我以前从未见过的东西。手表内部的“（）=>”是什么意思？它们被称为“箭头函数”（来自ES6）。例如，您可以阅读更多关于它们的内容。在注释中添加的主题不是很小：）。您可以在其他语言中找到类似的东西，但称为“lambda表达式”。您还将发现，在这段代码中不需要使用箭头函数，而普通函数只是完美的。为了语义起见，还存在使用函数和使用箭头函数的情况。

function linkingFn(scope, elm, attrs, ctrl) {
  // get the attribute value
  console.log(attrs.ngModel);

  // change the attribute
  attrs.$set('ngModel', 'new value');

  // observe changes to interpolated attribute
  attrs.$observe('ngModel', function(value) {
    console.log('ngModel has changed value to ' + value);
  });
}

  <body>
    <div my-directive="myVal" ng-model="myVal"></div>
    <input type="number" ng-model="myVal" /> 
  </body>

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

app.directive('myDirective', function() {
  return {
    restict: 'A',
    scope: {
      // one-way binding
      prop1: '<myDirective',
      // two-way binding
      prop2: '=myDirective',
      // string value
      prop3: '@myDirective',
      // bind to ngModel value
      ngModelProp: '<ngModel'
    },
    require: '^ngModel',
    controller: function($scope) {

      $scope.$watch(() => $scope.prop1, () => {
        console.log(`controller - scope - <myDirective - ${$scope.prop1} [${typeof($scope.prop1)}]`);
      });

      $scope.$watch(() => $scope.prop2, () => {
      console.log(`controller - scope - =myDirective - ${$scope.prop2} [${typeof($scope.prop2)}]`);
      });

      $scope.$watch(() => $scope.prop3, () => {
        console.log(`controller - scope - @myDirective - ${$scope.prop3} [${typeof($scope.prop3)}]`);
      });

      $scope.$watch(() => $scope.ngModelProp, () => {
        console.log(`controller - scope - ngModel - ${$scope.ngModelProp} [${typeof($scope.ngModelProp)}]`);
      });
    },
    controllerAs: 'ctrl',
    link: function($scope, element, attrs, ngModel) {

      $scope.$watch(() => $scope.prop1, () => {
        console.log(`link - scope - <myDirective - ${$scope.prop1} [${typeof($scope.prop1)}]`);
      });

      $scope.$watch(() => $scope.prop2, () => {
      console.log(`link - scope - =myDirective - ${$scope.prop2} [${typeof($scope.prop2)}]`);
      });

      $scope.$watch(() => $scope.prop3, () => {
        console.log(`link - scope - @myDirective - ${$scope.prop3} [${typeof($scope.prop3)}]`);
      });

      $scope.$watch(() => $scope.ngModelProp, () => {
        console.log(`link - scope - ngModel - ${$scope.ngModelProp} [${typeof($scope.ngModelProp)}]`);
        console.log(`link - NgModelController - ${ngModel.$modelValue} [${typeof(ngModel.$modelValue)}]`);
      });

      $scope.$watch(() => element.attr('my-directive'), () => {
        console.log(`link - element - ${element.attr('my-directive')} [${typeof(element.attr('my-directive'))}]`);
      });

      attrs.$observe('myDirective', () => {
        console.log(`link - attrs - ${attrs.myDirective} [${typeof(attrs.myDirective)}]`);
      });
    }
  }
});