栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

AngularJS-从子指令访问父指令属性

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS-从子指令访问父指令属性

从这篇SO帖子中汲取灵感,我在这个笨拙的人中有一个可行的解决方案。

我不得不改变很多。我还选择了一个独立的作用域,

editableString
因为将正确的值绑定到模板更容易。否则,您将不得不使用
compile
或其他方法(例如
$transclude
服务)。

结果如下:

JS:

var myApp = angular.module('myApp', []);myApp.controller('Ctrl', function($scope) {  $scope.myModel = { property1: 'hello1', property2: 'hello2' }});myApp.directive('editableFieldset', function () {  return {    restrict: 'E',    scope: {      model: '='    },    transclude: true,    replace: true,    template: '<div  ng-click="edit()"><div ng-transclude></div></div>',    link: function(scope, element) {      scope.edit = function() {        scope.editing = true;      }    },    controller: ['$scope', function($scope) {      this.getModel = function() {        return $scope.model;      }    }]  };});myApp.directive('editableString', function () {  return {    restrict: 'E',    replace: true,    scope: {      label: '@',      field: '@'    },    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',    require: '^editableFieldset',    link: function(scope, element, attrs, ctrl) {      scope.model = ctrl.getModel();    }  };});

HTML:

  <body ng-controller="Ctrl">    <h1>Hello Plunker!</h1>    <editable-fieldset model="myModel">      <editable-string label="Some Property1:" field="property1"></editable-string>      <editable-string label="Some Property2:" field="property2"></editable-string>    </editable-fieldset>  </body>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/649472.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号