Question

我知道这可能是某种重复，但我真的不知道如何说出我正在寻找的东西。所以我创建了一个仅限于属性的指令。我几乎想知道如何将指令本身设置为等于值。然后在链接函数中使用该值。

例如：我们说我有一个名为“myDirective”的指令＆＃39;仅限于属性。我想知道如何做这样的事情

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

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

Answer 1

您可以通过l attrs的ink function参数访问该属性。

clear all
close all

c=zeros(500,500);
c(:,250)=1;
dim=size(c);

D = bwdist(cumsum(c, 2,'reverse')> 0, 'euclidean'); %Sorry I forgot 'reverse'

c(200,400)=1;
c(400,255)=1;
c(250,252)=1;
c(300,258)=1;
c(100,270)=1;
c(130,256)=1;
c(310,260)=1;
figure(1);
imagesc (c);

for i=1:dim(1)
    for j= 1: dim(2)
        if c(i,j)==1 && j~=250
            c(i,[250:260])=1;
        end
    end
end

figure(2);
imagesc(c);

在您的情况下，您可以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); }); }询问。

Answer 2

我在控制器和链接功能中创建了一个使用绑定和ngModel的示例，以使用属性。

Check this Plunker并尝试修改输入值。

注意： attrs。$ observe（）用于监视插值属性。这意味着，如果您有<div my-directive="{{someVal}}"></div>，请注意更改。因此，在附加的示例中，不会触发回调，因为DOM属性值不会因插值而发生变化。

注意：此外，绑定还提供不同的行为，例如@（获取字符串值），=（双向数据绑定），<（一个 - 方式数据绑定）。

注意：在某些情况下，您希望注入NgModelController以处理ngModel（例如：更改标记，更改值，与验证交互）。

根据所有这些用法，您可以选择自己喜欢的做事方式。

如果您需要操作DOM，可以使用链接功能。但是在你需要操作数据的情况下，那么可能适合使用控制器。

HTML

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

JS

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)}]`);
      });
    }
  }
});

AngularJS指令 - 限制：＆＃39; A＆＃39;并将该指令设置为等于值

2 个答案: