如何在 Angular 指令的 link 函数中引用一个值？

Question

我已经为我的 Angular 应用程序定义了一个名为 myValue 的 value。我想从我拥有的指令的 link 方法访问 myValue，但我无法完成这项工作。这是我的代码：

angular.module('extApp').value('myValue', {
  foo: null,
  bar: null
});

angular.module('extApp')
.directive('myDirective', ['constants', 'myValue', function(constants, myValue) {
  return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
      location: '=',
      connectionType: '='
    },
    controller: function($scope) {
      ...
    },
    link: function(scope, element, attr) {
      scope.myFunction = function() {
        // Want to be able to reference my myValue here! For example:
        if (myValue.foo != null && myValue.foo > 0) {
            // myValue.foo doesn't work because it sees myValue as undefined
        }
      }

      scope.myOtherFunction = function() {
        ...
      }

      scope.myFunction();
    }
  }
}]);

你有什么建议吗？

提前致谢。

Answer 1

您也可以使用 constant。只需定义它并传递给您的指令即可。 valueFromYourConstant - 是如何访问常量值的示例。

angular
    .module('extApp')
    .constant('CONSTANT_NAME', {
        values: {
              "foo": null,
              "bar": null
        }
    })
    .directive('myDirective', ['constants', 'myValue', 'CONSTANT_NAME' function(constants, myValue, CONSTANT_NAME) {
        var valueFromYourConstant = CONSTANT_NAME.values["foo"];
    }

Answer 2

在函数内部使用即可：

  scope.myFunction = function() {
    console.log(myValue);
  }

它将使用 angularjs DI 注入指令函数并通过闭包在 myFunction 内部访问。

Answer 3

您可以通过要求 ngModel 来访问放置指令的元素的 ng-model。也可以使用 scope.variableName

访问其他范围变量

您可以参考下面的示例代码，其中有两个输入字段，一个用于输入密码，一个用于确认密码。该指令只是将确认密码与原始密码进行匹配，并将控制器变量 passmatch 设置为 true 或 false：

我的指令：

app.directive('matchPassword', function() {
                    return {
                    restrict: 'A',
                    require: 'ngModel',
                        link: function(scope, element, attr, ctrl) {
                        function passwordMatcher(ngModelValue) {

                        if (ngModelValue == scope.password) {
                        ctrl.$setValidity('passMatch', true);
                        } else {
                        ctrl.$setValidity('passMatch', false);
                        }
                        return ngModelValue;
                        }

                        ctrl.$parsers.push(passwordMatcher);
                        }
                    };
                });

还有我的html：

<div class="form-group form-group-default">
                    <label>Password</label>
                    <input type="password" name="password" ng-model="password" placeholder="Minimum of 6 Characters" class="form-control" valid-password required>
                  </div>

    <div class="form-group form-group-default">
                        <label>Confirm Password</label>
                        <input type="password" name="cpassword" ng-model="cpassword" placeholder="Confirm password" class="form-control" match-password required>
                      </div>

如何在 Angular 指令的 link 函数中引用一个值？

How to reference a value inside of an Angular directive's link function?

javascript

directive

angularjs