AngularJS指令获取内部元素

Question

我有下一个指令：

(function() {
    'use strict';

    angular
        .module('myApp')
        .directive('inner', inner);

    function inner () {

        return {
            restrict: 'A',
            scope: false,
            link: linkFunc
        };

        function linkFunc (scope, element, attrs) {

        }
    }
})();

和HTML：

<span inner>{{vm.number}}</span>

如何在linkFunc中访问vm.number的值？我需要从span标记的内容中精确获取值。

Answer 1

有多种方法可以做到这一点，但这里有两种最常见的方式：

ngModel

您可以在模板中使用ng-model：

<span inner ng-model="vm.number">{{vm.number}}</span>

在您的指令中，您需要ngModel，您可以在其中提取其值：

.directive( 'inner', function(){
    return {
        require: 'ngModel',
        link: function($scope, elem, attrs, ngModel){
            var val = ngModel.$modelValue
        }
    }
})

声明隔离范围属性

<span inner="vm.number">{{vm.number}}</span>

.directive( 'inner', function(){
    return {
        scope: { inner:'=' } ,
        link: function($scope, elem, attrs){
            var val = $scope.inner
        }
    }
})

一些不太常见的方式：

使用$ parse服务获取值

再次使用模板：

<span inner="vm.number">{{vm.number}}</span>

让我们假设你要去。首先，你需要在你的指令定义中注入$parse服务。然后在link函数内执行以下操作：

var val = $parse(attrs.inner)

继承了只读的范围

我不建议这样做，因为根据您定义指令范围选项的方式，事情可能会不同步：

1. isolate （又名隔离）范围不会继承该值，vm.number可能会抛出未定义的引用错误，因为在大多数情况下vm未定义。< / p>

2. 继承范围将从父作用域继承初始值，但在运行时可能会出现分歧。

由于指令的$scope引用与表达式{{1 }}

我再次强调这可能不是最好的选择。如果您遇到来自大量重复元素或大量绑定的性能问题，我只推荐这个。有关指令范围选项的更多信息 - https://spin.atomicobject.com/2015/10/14/angular-directive-scope/

Answer 2

嗯，在Angular指令中，Link函数几乎可以完成controller所有的操作。

为了使它变得非常简单，我们大部分时间都使用其中一个。

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

    app.controller('AppCtrl', function ($scope) {

          $scope.number = 5;

    }).directive('inner', function () {

      return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
          var number = scope.number;
          console.log(number);
        }
      }

    });

内部html：

<div inner ng-model="number">{{number}}</div>

https://plnkr.co/edit/YbXYpNtu7S3wc0zuBw3u?p=preview

为了从HTML中获取价值，Angular提供了ng-model指令，该指令适用于双向数据绑定概念。

@jusopi已经解释了其他方法：）

喝彩！