无法为AngularJS自定义指令隔离作用域属性设置新值
我正在创建一个非常简单的自定义指令,并试图通过使用“我不知道首先要注意一点,将一个简单的字符串变量从父范围传递到自定义指令隔离范围无法为AngularJS自定义指令隔离作用域属性设置新值,angularjs,Angularjs,我正在创建一个非常简单的自定义指令,并试图通过使用“我不知道首先要注意一点,将一个简单的字符串变量从父范围传递到自定义指令隔离范围 输入基本上应该使用绑定变量,因为$scope!==谢谢你的快速回答。然而,我不明白为什么我需要使用$onInit。当我在调试中检查指令控制器中的this.name时,它的this.name设置正确,但新值没有反映在模板中。@TuanLe如果您查看控制台的输出,您会发现ctrl.name最初未定义,$onInit内的值与父组件的值相同,这是因为作用域是在控制器执行后绑
输入基本上应该使用绑定变量,因为$scope!==谢谢你的快速回答。然而,我不明白为什么我需要使用$onInit。当我在调试中检查指令控制器中的this.name时,它的this.name设置正确,但新值没有反映在模板中。@TuanLe如果您查看控制台的输出,您会发现ctrl.name最初未定义,$onInit内的值与父组件的值相同,这是因为作用域是在控制器执行后绑定的,$onInit确保一切就绪,然后尝试修改相关变量。@Minato再次感谢您的回答。我现在明白了。我只是想知道为什么angularJS在控制器初始化之前不将作用域绑定到控制器。1.6版不推荐使用预分配绑定,将来的版本中将删除预分配绑定。有关详细信息,请参阅。其动机是预分配不适用于ES6类,用户应该继续使用$onInit生命周期挂钩。Tony J是指令的初始值,Paul G是父范围使用单向绑定提供的新值。在使用这些功能之前,请仔细阅读AngularJS中的单向和双向绑定。
(function(){
angular.module("app").controller("ctrl", ctrl);
function ctrl(){
ctrl = this;
ctrl.fullname = "Paul G.";
}
})()
(function () {
'use strict';
angular.module('app').directive('dir', dir);
function dir() {
return {
scope:{
name:'<',
},
bindToController: true,
template: `<h1>I'm a directive</h1>
<h1>Name: {{vm.name}}</h1>`
,
controller: function($scope){
this.name = "Tony J";
},
controllerAs:'vm'
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.4/angular-resource.js"></script>
<script src="app.js"></script>
<script src="ctrl.js"></script>
<script src="directive.js"></script>
</head>
<body ng-controller="ctrl as $ctrl">
<p>Hello {{$ctrl.fullname}}!</p>
<dir name="$ctrl.fullname"></dir>
</div>
</body>
</html>
controller: function($scope) {
ctrl = this;
ctrl.$onInit = function() {
ctrl.name = "some name"
}
},