0

在描述了我的设置之后，我的问题以粗体显示。

索引.html

<div ng-controller="MyCtrl">
    <user-picker placeholder="Type a name..."></user-picker>
</div>

设置：

var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);

控制器：

ctrls.controller('MyCtrl', function($scope) {
  $scope.foo = 'this is a foo';
});

指示：

directives.directive('userPicker', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      placeholder: '@'
    },
    templateUrl: 'file.html',
    link: function postLink($scope, ele, attrs) {
      console.log($scope);
      console.log('[ng] Scope is: ');
      console.log($scope.placeholder);
      console.log($scope.$parent.foo);
  }
});

file.html（指令）：

<span>
  <input placeholder="{{placeholder}}" type="text">
</span>

所以我想要结束的，通常是工作：

<span placeholder="Type a name...">
  <input placeholder="Type a name..." type="text">
</span>

该placeholder属性已正确解析。

这是实现这一目标的正确方法吗？请注意，该属性在两个地方结束。

为什么会出现这种奇怪的行为： 其次，我对console.log($scope). 控制台输出显示对象placeholder上准确设置的$scope属性。然而，即使如此，下console.log($scope.placeholder)一条语句仍返回“未定义”。当控制台输出清楚地显示属性已设置时，这怎么可能？

我的目标是：

  • placeholder将属性从父标记向下移动或复制到子<input>标记。
  • 可以从链接功能中访问模板范围。
  • 引用MyCtrl该指令所在的父控制器。

我几乎就在那里，直到我遇到了上面提到的奇怪行为。任何想法表示赞赏。

4

1 回答 1

1

与其尝试从范围中读取此内容，不如读取 attrs 工作？

一些 HTML

<script type="text/ng-template" id="file.html">
    <span>
        <input placeholder="{{placeholder}}" type="text"/>
    </span>
</script>
<body ng-app="app">
<div ng-controller="MyCtrl">
    <user-picker placeholder="Type a name..."></user-picker>
</div>
</body>

一些JS

var app = angular.module('app', ['app.directives', 'app.controllers']);
var directives = angular.module('app.directives', []);
var ctrls = angular.module('app.controllers', []);

ctrls.controller('MyCtrl', function ($scope) {
    $scope.foo = 'this is a foo';
});

directives.directive('userPicker', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            placeholder: '@'
        },
        templateUrl: 'file.html',
        link: function postLink($scope, ele, attrs) {
            console.log($scope);
            console.log('[ng] Scope is: ');
            console.log(attrs["placeholder"]);
            console.log($scope.$parent.foo);
        }
    }
});

小提琴

http://jsfiddle.net/Rfks8/

于 2013-08-05T02:54:15.103 回答