我有下一个指令:
(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标记的内容中精确获取值。
答案 0 :(得分:2)
有多种方法可以做到这一点,但这里有两种最常见的方式:
您可以在模板中使用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
}
}
})
一些不太常见的方式:
再次使用模板:
<span inner="vm.number">{{vm.number}}</span>
让我们假设你要去。首先,你需要在你的指令定义中注入$parse
服务。然后在link
函数内执行以下操作:
var val = $parse(attrs.inner)
我不建议这样做,因为根据您定义指令范围选项的方式,事情可能会不同步:
isolate (又名隔离)范围不会继承该值,vm.number
可能会抛出未定义的引用错误,因为在大多数情况下vm
未定义。< / p>
继承范围将从父作用域继承初始值,但在运行时可能会出现分歧。
$scope
引用与表达式{{1 }}
醇>
我再次强调这可能不是最好的选择。如果您遇到来自大量重复元素或大量绑定的性能问题,我只推荐这个。有关指令范围选项的更多信息 - https://spin.atomicobject.com/2015/10/14/angular-directive-scope/
答案 1 :(得分:0)
嗯,在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已经解释了其他方法:)
喝彩!