gpt4 book ai didi

angularjs-directive - 两种方式绑定(bind)Angularjs指令不起作用

转载 作者:行者123 更新时间:2023-12-04 03:11:58 25 4
gpt4 key购买 nike

我一直在试图找出解决方案,但我认为我遇到了死胡同。

所以这是我的指令

directives.directive('postprocess', function($compile)
{
return {
restrict : 'E',
require: '^ngModel',
scope: {
ngModel: '='
},
link: function(scope, element, attrs) {
var parsed = scope.ngModel;
el = $compile(parsed)(scope);
element.html("");
//add some other html entities/styles.
element.append(el);
console.log(parsed);
}
};
});

html

<postprocess ng-model="some_model.its_property" style="padding-top: 10px;" />

在 Controller 的某个地方,我更新了模型属性

some_model.its_property = 'Holla';

但它不会更新相应的指令。它在加载时完美运行,这告诉我它可能不完全是范围问题。

最佳答案

它要简单得多,因此我删除了您在那里的一些额外代码。
请查看下面的代码或工作 Plunker :

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script>
var myApp = angular.module('myApp', []);
myApp.directive('postprocess', function ($timeout) {
return {
restrict : 'E',
transclude: 'true',
scope: {
myVariable: '='
},
link: function(scope, element, attrs) {
$timeout(function () {
scope.myVariable = 'Bye bye!'
}, 200);
}
};
});

myApp.controller('myAppCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.myVariable = {
value : 'Holla'
};

console.log($scope.myVariable.value); // -> prints initial value
$timeout(function () {
console.log($scope.myVariable.value); // -> prints value after it is changed by the directive
}, 2000);
}])
</script>

</head>
<body ng-controller="myAppCtrl">
<postprocess my-variable="myVariable.value" style="padding-top: 10px;" />
</body>
</html>
  • Controller 将初始值设置为“Holla”
  • 该指令通过 my-variable 接收该值。属性
  • 使用两种方式数据绑定(bind)对 scope.myVariable 所做的任何更改更新 $scope.myVariable主 Controller
  • 几秒钟后$scope.myVariable更改为“再见”
  • 看看你的 console.log

  • $watch 和 $apply

    Angular's two-way data binding is the root of all awesome in Angular. However, it's not magic, and there are some situations where you need to give it a nudge in the right direction.

    When you bind a value to an element in Angular using ng-model, ng-repeat, etc., Angular creates a $watch on that value. Then whenever a value on a scope changes, all $watches observing that element are executed, and everything updates.

    Sometimes, usually when you're writing a custom directive, you will have to define your own $watch on a scope value to make the directive react to changes.

    On the flip side, sometimes you change a scope value in some code but the app doesn't react to it. Angular checks for scope variable changes after pieces of your code have finished running; for example, when ng-click calls a function on your scope, Angular will check for changes and react. However, some code is outside of Angular and you'll have to call scope.$apply() yourself to trigger the update. This is most commonly seen in event handlers in custom directives.

    关于angularjs-directive - 两种方式绑定(bind)Angularjs指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19121876/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com