【问题标题】:Binding controller properties in isolate scope在隔离范围内绑定控制器属性
【发布时间】:2015-09-22 13:04:51
【问题描述】:

我正在尝试了解 AngularJS 指令和范围绑定。我宁愿给出我的代码然后提问:

这是我的指令定义:

'use strict';
 (function(){
 var app = angular.module('gemStore', []);
 var gem = {name:"Pearl",price:22.5 };
 app.controller("StoreController",function(){
   var self = this;
    self.product = gem;
    self.validateOnSubmit="myForm";

});
app.directive("requireOnSubmit",function(){
   var directiveDefinitionObject = {
       restrict:'A',
       scope : {
           validationFlag : '='
       },
       link : function(scope,ele,attr){
           console.log(scope.validationFlag);
         },
       controller : "StoreController",
       controllerAs : "store",
       bindToController : true
   };
    return directiveDefinitionObject;
});}());

这是我的 html :

  <!DOCTYPE html>
  <html ng-app="gemStore">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body ng-controller="StoreController as store">
    <div>
        <h3>{{store.product.name}} </h3>  <h3>{{store.product.price}} </h3>
    </div>
    <form name="myForm">
        <input type="text" name="test" require-on-submit />
    </form>

</body>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>

现在我想将控制器上的validationOnSubmit 属性与validationFlag 绑定,它应该是双向绑定。 我已经尝试添加

 <input type="text" name="test" require-on-submit      validationFlag="validationOnSubmit"/>

在指令中:

     scope : {
           validationFlag : '=validationFlag'
       }

但不起作用。如何做到这一点?

【问题讨论】:

    标签: angularjs binding directive


    【解决方案1】:

    我不确定 2 路绑定是否适用于控制器属性,但正确的语法应该是

       validationFlag="store.validationOnSubmit"
    

    StoreController 将被初始化两次。一次在 body 元素上,一次在指令上。为避免混淆,您应该从指令中删除控制器,如果您需要访问控制器,请使用 require 属性。

    【讨论】:

    • 我应该在 require 属性中指定什么?要求=“商店控制器”?并接受它作为指令函数的第四个参数。
    • 不,你需要定义一个指令。你可以使用ngController
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-09
    • 2014-06-23
    • 2015-12-07
    • 2015-08-02
    • 2017-09-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多