angularJS 入门基础(6)

    <div>
        <div>
            angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
        </div>
        <div>
            <hehe ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">
                hehe--o(^▽^)o哇;
            </hehe>
        </div>
        <script type="text/javascript">
            app.directive("hehe", function() {
                function compile() {
                };
                return {
                    link : function($scope, $element) {
                        var obj = angular.element($element);
                        //obj.find不好用;
                        var add = obj[0].getElementsByClassName("add")[0];
                        var reduce = obj[0].getElementsByClassName("reduce")[0];
                        angular.element(add).bind("click", function(){
                            $scope.h = $scope.h+10;
                            apply();
                        })
                        angular.element(reduce).bind("click", function(){
                            $scope.h = $scope.h-10;
                            apply();
                        });
                        function apply() {
                            $scope.$apply();
                        }
                        return compile;
                    },
                    controller : function($scope) {
                        $scope.w = 200;
                        $scope.h = 50;
                        //$scope.$apply();
                    },
                    restrict: 'AE',
                    replace : true,
                    scope : "=ng-style",
                    transclude : true,
                    template : '<div><div ng-transclude></div><button>+</button><button>-</button></div>'
                }
            })
        </script>
    </div>

angular中的模板如何使用,这个要配合路由器使用比较叼:

复制代码 代码如下: