关于angular中controller和指令交互数据:@

原创 2015年11月18日 13:02:26

首先看代码:

html:

<!doctype html>
<html ng-app="app">
    <head>
    </head>
    <body>

        <div ng-controller="MyCtrl">
            <drink flavor="{{ctrlFlavor}}"></drink>
        </div>
        <script src="angular.min.js"></script>
        <script src="js/bb.js"></script>
    </body>
</html>

bb.js

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

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        restrict: "AE",
        template: "<div>{{cc}}</div>",
        link: function(scope, element, attrs) {
            scope.cc = attrs.flavor;            
        }

    }
});

按照上面的写法,输出的是aaaaaa

首先定义了controller中的变量ctrlFlavor,然后赋值给html中drink指令的flavor属性。drink指令中,又定义了模板,模板中包含了一个变量cc,在link中将html中flavor属性

的值(即controller的值aaaaaa)赋值给template的cc完成数据交互。



angular对上面的写法提供了一个简便的写法,如下:

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

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        scope: {
            flavor: '@flavor'
        },
        restrict: "AE",
        template: "<div>{{flavor}}</div>",
        link: function(scope, element, attrs) {
        }

    }
});

首先,scope中的@flavor匹配html中的flavor的值,然后将值传入到scope的flavor中,再匹配template的flavor,完成值的传递。

注意,这里@flavor可以写成@aa,html中drink内也要写成aa="",只要和html中的属性匹配上就好。如果只写一个@符号,则html中必须写成flavor="",和scope中的名字一致。

相关文章推荐

angularJS 自定义指令 方法属性:controller 和属性:controllerAs

自定义指令中还可以定义controller属性,是一个function,可以在其中定义数据和方法,可以提供给该指令的link内的方法使用。 示例的html: ...

angularjs中如何实现控制器和指令之间交互

如果我们具有下面的DOM结构: 滑动加载 同时我们的控制器具有如下的签名: var myModule = angular.module("MyModule", []); /...

angularjs向指令中传递数据

我们在定义一个指令的时候,有些情况下,希望一些如url的信息不会混在指令内部,以为使用指令的人带来更好的体验。在这种情况下我们可以为指令提供一个公共的接口。方法如下。 定义一个指令: angular....

angularjs学习系(3)指令的@=&

1:先说指令域scope的@     我觉得描述很费劲,直接用代码来阐述:     angularjs.html      ...
  • ikscher
  • ikscher
  • 2015年04月02日 14:51
  • 18381

AngularJS指令参数详解

指令,很重要 AngularJS与JQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样。 JQuery通过选择器找到DOM元素,再赋予元素的行为; ...
  • kongjiea
  • kongjiea
  • 2015年11月14日 22:26
  • 27957

指令scope与controller中$scope交互的几种方式

你想修改controller的$scope。首先你自己定义的指令就是用的controller中的scope。它没有继承或者独立出来一个scope。所以你修改你指令的scope下的属性肯定会修改引用这个...

angularjs框架下controller间的传值方法

AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在创建新的控制器时,angul...

angularjs 从外部改变controller内的数据

var appElement = document.querySelector('[ng-controller=seatsCtrl]'); var $scope = angular.element(a...

angular自定义指令作用域&--传递引用

独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令。这些使用&就可以完成。下面是一个例子,定义一个叫做add的本地作用域属性用...

angular指令传值(源码及注释)

angular指令传值(源码及注释) 目录 angular指令传值源码及注释 目录 html代码部分 js代码部分 css样式部分 html代码部分 代码块语法遵...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于angular中controller和指令交互数据:@
举报原因:
原因补充:

(最多只允许输入30个字)