Angular:我的isolated属性在simple指令中没有绑定

时间:2014-02-11 18:29:30

标签: javascript angularjs

我正在使用this tutorial来了解如何使用具有隔离范围的指令来显示图像。我缺少什么来获取要绑定的属性?在我的ide中,我可以输出图像,但指令不起作用。小提琴什么都没有显示: - (

小提琴:http://jsfiddle.net/gogirl/Stm3j/

这是在我的程序中输出的:

 output:{{photo.url}}
<img ng-src='http://www.w3schools.com/js/pic_bulboff.gif' />

这不输出:

 <my-d photo-src={{photo.url}} ></my-d>

2 个答案:

答案 0 :(得分:2)

您的jsfiddle配置中有残留数据

这是我做的工作

  1. 删除外部资源,因为您使用角度为1.0.1且角度为1.2.1
  2. 在选项面板中删除正文标记myModule
  3. 删除对未定义变量app的调用,并使用angular.module
  4. 进行查询

    jsfiddle updated here

    // My Main Application File
    angular.module('myApp', ['myDirectives']);
    
    // My Directives File
    angular.module('myDirectives', []);
    
    // Controller One File
    angular.module('myDirectives', []).directive('myD', function () {
        return {
            restrict: 'E',
            template: '<figure> <img ng-src="{{photoSrc}}"/> </figure>',
            replace: true,
            // pass these two names from attrs into the template scope
            scope: {
                photoSrc: '@'
            }
        }
    })
    

答案 1 :(得分:0)

Working Examle

当我使用全局应用程序方法切换原始模块链接方法时,一切正常:

   var app = angular.module("myApp", []);
       app.directive('myD', function() {
           return {
               restrict: 'E',
               template: '<figure> <img ng-src="{{photoSrc}}"/> </figure>',
               replace: true,
               // pass this name from attrs into the template scope
               scope: {
                   photoSrc: '@'
               }
       }
    });

但是在我弄清楚链接声明有什么问题之前我不会是一个快乐的露营者,因为它在其他地方工作得很好。任何接受者?小提琴仍然没有工作所以我认为它可能是一个问题,它是一个小提琴。 编辑:使用链接方法工作正常。一次一个婴儿步骤:-)