gpt4 book ai didi

javascript - 数据未显示在创建的指令中

转载 作者:太空宇宙 更新时间:2023-11-04 16:10:22 25 4
gpt4 key购买 nike

我的 html 看起来像这样:

<body ng-app="customDirective">
<div ng-controller="anController">
Date format: <input ng-model="fooData"> <hr/>
Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>
</div>
</body>
</html>

如果范围属性 scope.fooData 发生更改,我想更新我创建的标记 my-new-directive 内的数据。

所以我有一个名为 fooData 的作用域属性:

$scope.fooData = 'Hello World!:)';

我正在创建一个指令:

(function(angular) {
'use strict';
angular.module('customDirective', [])
.controller('anController', ['$scope', function($scope) {
$scope.fooData = 'Hello World!:)';
}])
.directive('myNewDirective', [function() {

function link(scope, element, attrs) {
var format,
timeoutId;

function updateValue() {
element.text(format);
}

scope.$watch(scope.fooData, function(value) {
format = value;
updateValue();
});
}

return {
restrict: 'A',
link: link,
scope: {
fooAttr: '@'
}
};
}]);
document.createElement('my-new-directive');
})(window.angular);

但是如果我在输入标记内写入新值,那么我的新指令中不会发生任何事情。

任何帮助将不胜感激!我正在使用 AngularJS 1.5.8。

最佳答案

我发现了几个错误,并且该指令过于复杂。除了上面的所有评论之外,这是错误的:

   return {
restrict: 'A',
link: link,
scope: {
fooAttr: '@'
}
};

您可以限制指令在作为属性添加时的操作。但是在您的示例代码中:

Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>

您将其用作元素。

像这样更改你的指令:

   return {
restrict: 'AE', // allow it as element or attribute
link: link,
scope: {
fooAttr: '@'
}
};

   return {
restrict: 'E', // only element
link: link,
scope: {
fooAttr: '@'
}
};

另外,删除此:

  document.createElement('my-new-directive');

查看此代码笔:http://codepen.io/anon/pen/QdjBZr这应该可以帮助你。

关于javascript - 数据未显示在创建的指令中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41551767/

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