存储和定期检查AngularJS指令中的元素?

时间:2014-12-03 20:02:51

标签: html angularjs

我目前有一些这样的指令:

App.directive('thing1', function(){
  return{
     restrict: 'E',
     scope:{
        stuff: '='
     },
  templateURL: 'thing1.html'
  }
});


App.directive('thing2', function(){
  return{
     restrict: 'E',
     scope:{
        moreStuff: '='
     },
  templateURL: 'thing2.html'
  }
});

App.directive('thing3', function(){
  return{
     restrict: 'E',
     scope:{
        awesomeStuff: '='
     },
  templateURL: 'thing3.html'
  }
});

App.directive('thing4', function(){
  return{
     restrict: 'E',
     scope:{
        otherStuff: '=',
        name: '='
     },
  templateURL: 'thing4.html'
  }
});

这些是我使用的模板。:

(thing1.html)

<div>
<h4> {{someObject.name + " " + someObject.title}} </h4><hr>
<h4> <strong> Cool Information! </strong> </h4>
<thing2 more-stuff = "someOtherObject.info"></thing2>
<thing3 awesome-stuff = "someObject.info"></thing3>
</div>

(thing2.html)

<div>
<thing4 other-stuff = "moreStuff.data"  name="Some Data"></thing4>
<thing4 other-stuff = "moreStuff.moreData" name="Some More Data"></thing4>
</div>

(thing3.html)

<div>
<thing4 other-stuff = "awesomeStuff.data" name="Even More Data!! :D"></thing4>
<thing4 other-stuff = "awesomeStuff.moreData" name="So Much Data D:"></thing4>
</div>

(thing4.html)

<div>
<label for="inputValue">{{name}}:</label>
<input type="text" id="inputValue" ng-model="otherStuff" />
</div>

这是我正在进行的工作的略微简化版本,但我认为它捕获了回答我的问题所需的内容。

基本上我想要做的是将值的状态存储在thing1指令(即四个输入文本字段)下,而不必引用绑定到字段的对象(即someObject,moreStuff,awesomeStuff)并定期检查这些值的当前状态与我存储的原始状态,以查看是否发生了任何更改。

我想存储初始状态并定期与之比较而不是简单地使用ng-change来检测更改的原因是我正在使用的应用程序可用于生成对绑定到的对象的编程更改文本字段和ng-change似乎没有选择这些。

我需要直接从页面获取值而不是检查对象的值的原因是表单比我提供的示例复杂得多,我觉得这样做会非常笨重。

另外,假设我的thing1.html文件看起来像这样:

<div ng-repeat="stuff in someObject.listOfStuff">
<h4> {{stuff.name + " " + stuff.title}} </h4><hr>
<h4> <strong> Cool Information! </strong> </h4>
<thing2 more-stuff = "stuff.info"></thing2>
<thing3 awesome-stuff = "stuff.moreInfo"></thing3>
</div>

如果我的thing1模板使用ng-repeat生成页面,我将如何完成上面定义的任务?

对不起..我知道这是一篇很长篇大论的帖子。我一直坚持这个!如果我需要提供更多说明,请告诉我!谢谢:D

0 个答案:

没有答案