参数更改的角度指令刷新

我有一个角度指令，初始化如下:

<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>

我希望它足够聪明，能够在 $scope.some_prop更改时刷新指令，因为这意味着它应该显示完全不同的内容。

我已经测试过了，什么也没有发生，连接函数甚至没有得到调用时，$scope.some_prop的变化。有什么办法吗？

133531 次浏览
小开

您试图做的是在指令中监视属性的属性。您可以使用 $观察()观察属性更改的属性，如下所示:

angular.module('myApp').directive('conversation', function() {
return {
restrict: 'E',
replace: true,
compile: function(tElement, attr) {
attr.$observe('typeId', function(data) {
console.log("Updated data ", data);
}, true);


}
};
});

请记住，我在这里的指令中使用了“编译”函数，因为您没有提到是否有任何模型，以及这是否是性能敏感的。

如果你有模型，你需要将“ 编译”函数改为“ 链接”或者使用“ 控制器”来监视模型变化的属性，你应该使用 $手表()，并从属性中取出角\{\{}}括号，例如:

<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>

在指令中:

angular.module('myApp').directive('conversation', function() {
return {
scope: {
typeId: '=',
},
link: function(scope, elm, attr) {


scope.$watch('typeId', function(newValue, oldValue) {
if (newValue !== oldValue) {
// You actions here
console.log("I got the new value! ", newValue);
}
}, true);


}
};
});
小开
最佳答案

Link 函数只被调用一次，因此它不会直接执行您所期望的操作。你需要使用角度 $watch来观察模型变量。

这个手表需要在链接函数中设置。

如果使用隔离作用域作为指令，则作用域将为

scope :{typeId:'@' }

在你的链接函数，然后你添加一个手表像

link: function(scope, element, attrs) {
scope.$watch("typeId",function(newValue,oldValue) {
//This gets called when data changes.
});
}

如果不使用独立作用域，请在 some_prop上观察

小开 
angular.module('app').directive('conversation', function() {
return {
restrict: 'E',
link: function ($scope, $elm, $attr) {
$scope.$watch("some_prop", function (newValue, oldValue) {
var typeId = $attr.type-id;
// Your logic.
});
}
};
}
小开

我希望这将有助于从父作用域重新加载/刷新有关值的指令

<html>


<head>
<!-- version 1.4.5 -->
<script src="angular.js"></script>
</head>


<body ng-app="app" ng-controller="Ctrl">


<my-test reload-on="update"></my-test><br>
<button ng-click="update = update+1;">update \{\{update}}</button>
</body>
<script>
var app = angular.module('app', [])
app.controller('Ctrl', function($scope) {


$scope.update = 0;
});
app.directive('myTest', function() {
return {
restrict: 'AE',
scope: {
reloadOn: '='
},
controller: function($scope) {
$scope.$watch('reloadOn', function(newVal, oldVal) {
//  all directive code here
console.log("Reloaded successfully......" + $scope.reloadOn);
});
},
template: '<span>  \{\{reloadOn}} </span>'
}
});
</script>




</html>
小开

如果您使用的是 AngularJS1.5.3或更高版本，那么您应该考虑转移到组件而不是指令。 这些工作原理与指令非常相似，但是有一些非常有用的附加特性，比如 $onChanges (changesObj) ，它是生命周期钩子之一，每当单向绑定更新时都会调用它。

app.component('conversation ', {
bindings: {
type: '@',
typeId: '='
},
controller: function() {
this.$onChanges = function(changes) {
// check if your specific property has changed
// that because $onChanges is fired whenever each property is changed from you parent ctrl
if(!!changes.typeId){
refreshYourComponent();
}
};
},
templateUrl: 'conversation .html'
});

这是 医生，用于深化成组件。


提交答案