使用ng-init初始化范围不是在指令中绑定

时间:2014-09-16 05:33:25

标签: angularjs angularjs-directive angularjs-scope

您好我正在尝试使用在ng-init事件中定义的'@'将值绑定到指令。但这并没有进入我的指令,它返回undefined。这个属性实际解析的时间是在编译中,链接?另外,为什么总是返回undefined?我在这里做错了什么?

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController" ng-init="init()">
    <h1>Confused directives!!!</h1>
    <my-user userName="{{user.name}}"></my-user>
    <br>
    {{user.name}}
  </body>

</html>

(function(){
    'use strict';
    var app = angular.module('app', []);


    app.controller('demoController', ['$scope', demoController])

    function demoController($scope){
        console.log('Im in the controller');
        $scope.init = function (){
            $scope.user = {
                name: 'Argo'
            }
            console.log('Im in init method of controller')
        }
    }

    app.directive('myUser', myUser);

    function myUser(){
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                userName: '@'
            },
            template: '<div><b>{{userName}} is defined from init method </b></div>',
            link: function(scope, ele, attr){
                console.log('Im in link method of directive');
                console.log('this is loaded' + scope.userName);
                attr.$observe('userName', function(newValue){
                    console.log(newValue);
                })
            }
        }
    }
})();
http://plnkr.co/edit/vAKMNub8HRcphiaMMauR?p=preview

0 个答案:

没有答案