AngularJS指令范围变量未定义
[英]AngularJS Directive Scope variables undefined
问题描述
Here is the relevant JSFiddle 
这是相关的JSFiddle
https://jsfiddle.net/9Ltyru6a/3/ https://jsfiddle.net/9Ltyru6a/3/
In the fiddle, I have set up a controller and a directive that I want to use to call a callback whenever a value is change. 在小提琴中，我设置了一个控制器和一个指令，我想用它在值发生变化时调用回调。 I know that Angular has an ng-change directive, but I want something more akin to the standard onchange event (that gets triggered once when the field is blurred). 我知道Angular有一个ng-change指令，但我想要更类似于标准的onchange事件（当字段模糊时会触发一次）。
Controller: 控制器：
var Controllers;
(function (Controllers) {
var MyCtrl = (function () {
function MyCtrl($scope) {
$scope.vm = this;
}
MyCtrl.prototype.callback = function (newValue) {
alert(newValue);
};
return MyCtrl;
})();
Controllers.MyCtrl = MyCtrl;
})(Controllers || (Controllers = {}));
Directive: 指示：
var Directives;
(function (Directives) {
function OnChange() {
var directive = {};
directive.restrict = "A";
directive.scope = {
onchange: '&'
};
directive.link = function (scope, elm) {
scope.$watch('onChange', function (nVal) {
elm.val(nVal);
});
elm.bind('blur', function () {
var currentValue = elm.val();
scope.$apply(function () {
scope.onchange({ newValue: currentValue });
});
});
};
return directive;
}
Directives.OnChange = OnChange;
})(Directives || (Directives = {}));
HTML: HTML：
<body ng-app="app" style="overflow: hidden;">
<div ng-controller="MyCtrl">
<button ng-click="vm.callback('Works')">Test</button>
<input onchange="vm.callback(newValue)"></input>
</div>
</body>
The button works, so I can safely say (I think) that the controller is fine. 按钮工作，所以我可以安全地说（我认为）控制器很好。 However, whenever I change the value of the input field and unfocus, I get a "vm is undefined" error. 但是，每当我更改输入字段的值并取消焦点时，我都会收到“vm is undefined”错误。
Thanks for the help! 谢谢您的帮助！
2 个解决方案
解决方案1
2 已采纳 2015-07-09 18:32:19
First of all, use proper controllerAs notation, not $scope.vm = this; 首先，使用适当的控制器作为符号，而不是$scope.vm = this; : ：
ng-controller="MyCtrl as vm"
Then don't mix custom directive with native onchange event handler - this is the reason why you get undefined error. 然后不要将自定义指令与native onchange事件处理程序混合使用 - 这就是为什么会出现undefined错误的原因。 Name your directive something like onChange and use on-change attribute instead. 将您的指令命名为onChange并使用on-change属性。
Correct code would look like: 正确的代码看起来像：
var app = angular.module("app", []);
var Directives;
(function (Directives) {
function OnChange() {
var directive = {};
directive.restrict = "A";
directive.scope = {
onChange: '&'
};
directive.link = function (scope, elm) {
elm.bind('blur', function () {
var currentValue = elm.val();
scope.$apply(function () {
scope.onChange({
newValue: currentValue
});
});
});
};
return directive;
}
Directives.onChange = OnChange;
})(Directives || (Directives = {}));
app.directive("onChange", Directives.onChange);
var Controllers;
(function (Controllers) {
var MyCtrl = (function () {
function MyCtrl($scope) {
}
MyCtrl.prototype.callback = function (newValue) {
alert(newValue);
};
return MyCtrl;
})();
Controllers.MyCtrl = MyCtrl;
})(Controllers || (Controllers = {}));
app.controller("MyCtrl", ["$scope", function ($scope) {
return new Controllers.MyCtrl($scope);
}]);
Demo: https://jsfiddle.net/9Ltyru6a/5/ 演示： https ： //jsfiddle.net/9Ltyru6a/5/
解决方案2
1 2015-07-09 19:30:00
If the intent of your code is to only update your controller value on blur, rather than update it on every keypress, angular has ngModelOptions for this use. 如果您的代码的目的是仅在模糊时更新控制器值，而不是在每次按键时更新它，则angular具有此用途的ngModelOptions 。 For example: 例如：
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" />
you could even provide a debounce, or a button to clear the value.... 你甚至可以提供去抖，或按钮来清除价值....
<form name="userForm">
<input type="text" name="userName"
ng-model="user.name" ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button>
</form>
In these cases, if you were to supply an ng-change , it would only trigger on the blur event, or after the debounce. 在这些情况下，如果您要提供ng-change ，它只会在blur事件或debounce之后触发。
You can also write directives that directly leverage the $validators or $asyncValidators from the ngModelController 您还可以编写直接利用$asyncValidators的$validators或$asyncValidators的ngModelController
here's an example from the Angular Developer Guide : 这是Angular 开发人员指南中的一个示例：
app.directive('username', function($q, $timeout) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var usernames = ['Jim', 'John', 'Jill', 'Jackie'];
ctrl.$asyncValidators.username = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty model valid
return $q.when();
}
var def = $q.defer();
$timeout(function() {
// Mock a delayed response
if (usernames.indexOf(modelValue) === -1) {
// The username is available
def.resolve();
} else {
def.reject();
}
}, 2000);
return def.promise;
};
}
};
});
and the HTML: 和HTML：
<div>
Username:
<input type="text" ng-model="name" name="name" username />{{name}}<br />
<span ng-show="form.name.$pending.username">Checking if this name is available...</span>
<span ng-show="form.name.$error.username">This username is already taken!</span>
</div>
You could of course add the ng-model-options to ensure that this triggers only once. 您当然可以添加ng-model-options以确保仅触发一次。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.