www.msyz555.comangularjs指令

diretive.js:
 function myInput {
  return {
    restrict: E,
    scope: false,
    templateUrl: 
    <div class="{{_init.colNum}}">
      <div class="form-group">
        <label class="control-label">{{_init.name}}</label>
        <input  class="form-control" type="text" size="16" ng-model="yy">
      </div>
    </div>,
    controller: function $scope {
    
    }
  }
}
html:
<my-input my-model="xx"></my-input>

题目是:
我想要在myInput的指令上,在封装一个属性指令比如myModel,myModel里面的xx去交换或许叫映射,myInput里面的yy这个ng-model,有什么好的办法。怎样去写myModel这个指令啊

运用scope 来读取这个变量

    scope: {
        yy: @myModel,
    },
  • scope: false 承继父级的scope

  • scope: true 不承继,全新的scope

  • scope: { xx: @xx , yy: =yy, zz: &zz } 从attribute读取相应的值,

    这里的有3个款式

    • @ 读取变量

      $scope.abc = 123;
      <div my-model="abc" />
      
      yy => abc 便是父级的变量,abc变了,这个一同变
    • = 读取值

      $scope.abc = 123;
      <div my-model="{{abc}}" />
      
      yy => 123 获取值,和abc没有干系
    • & 普通用于调用函数

      $scope.click = function {};
      <div my-model="click" />
      
      yy => 父级的函数

假如 scope: false,可以如许 万不得已的不要如许用

注入:$compile $templateRequest $sce

function myInput$compile, $templateRequest, $sce {
    return {
        ...
        ...
        scope: false,
        link: functionscope, element, attrs {
            scope.yy = attrs.myModel;
            //需求读取远程模板的
            var templateUrl = $sce.getTrustedResourceUrlpath/to/template.html;
            $templateRequesttemplateUrl.thenfunctiontemplate {
                element.htmltemplate;
                $compileelement.contentsscope;
            }, function {
                // An error has occurred
            };
            //无需读取的
            element.html<div>..模板内容..</div>;
            $compileelement.contentsscope;
        }
    }
}

(看完/读完)这篇文章有何感想! www.msyz555.com的分享…

发表评论

姓名 *
电子邮件 *
站点