Question

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

的index.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)语句也会返回“undefined”。当控制台输出清楚地显示属性设置时，这怎么可能？

我的目标是：

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

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

Answer 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/

AngularJS奇数指令范围行为

1 个答案: