Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use angular's scopel instruction, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use the scopel instruction of angular. Let's take a look at it.

The usage code is as follows:

Document

.primary {background:red

}

VarmyApp=angular.module ('myApp', [])

MyApp.controller ('mainCtrl', [' $scope',function ($scope) {

$scope.myClass='primary'

}])

MyApp.directive ('myBtn',function () {return {)

Template:''

}

})

1.png

It's nice to use custom instructions like above, but if you want to customize the buttons rendered by each instruction, it doesn't seem to work. For example, let's create a bunch of custom instructions below, and they look exactly the same:

Document

.primary {background:red

}

VarmyApp=angular.module ('myApp', [])

MyApp.controller ('mainCtrl', [' $scope',function ($scope) {

$scope.myClass='primary'

}])

MyApp.directive ('myBtn',function () {return {)

Template:''

}

})

2.png

One idea is to put these custom command buttons into different controllers, and then pass different values in the controller through the $scope context:

Document

.primary {background:red

} .success {background:green

} .default {background:gray

}

VarmyApp=angular.module ('myApp', [])

MyApp.controller ('aCtrl', [' $scope',function ($scope) {

$scope.myClass='primary'

}])

MyApp.controller ('bCtrl', [' $scope',function ($scope) {

$scope.myClass='success'

}])

MyApp.controller ('cCtrl', [' $scope',function ($scope) {

$scope.myClass='default'

}])

MyApp.directive ('myBtn',function () {return {)

Template:''

}

})

3.png

It's too troublesome to write this, so our angular provides a configuration item called scope for our custom directive, so we can write as follows:

Document

.primary {background:red

} .success {background:green

} .default {background:gray

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.className1='primary'

$scope.className2='success'

$scope.className3='default'

}])

.directive ('myBtn',function () {return {)

Scope: {

A _

}

Template:''

}

})

To understand the above, you need to pay attention to two points:

The an in the independent scope here represents the model an in template.

= b means to ask angular to find the property b of the current instruction in the view

The value of attribute b needs to be found in the external scope

If you want the name of the model that you want to bind in the instruction scope to be the same as the property name used externally, you can save it as follows:

Document

.primary {background:red

} .success {background:green

} .default {background:gray

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.className1='primary'

$scope.className2='success'

$scope.className3='default'

}])

.directive ('myBtn',function () {return {)

Scope: {

A _

}

Template:''

}

})

Of course, the = sign above is bidirectional data binding:

Document

.primary {background:red

} .success {background:green

} .default {background:gray

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.abc=' I am the original content'

}])

.directive ('myBtn',function () {return {)

Scope: {

A _

}

Template:' {{a}}'

}

})

If you just want one-way data communication, you can use the @ symbol:

Document

.primary {background:red

} .success {background:red

} .default {background:red

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.mm='primary'

}])

.directive ('myBtn',function () {return {)

Scope: {

A _

}

Template:''

}

})

If you want to use ng-class, you can:

Document

.primary {background:red

} .success {background:red

} .default {background:red

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.mm=true

}])

.directive ('myBtn',function () {return {)

Scope: {

A _

}

Template:''

}

})

Finally, there is a method that scope can set to refer to an external scope

Document

.primary {background:red

} .success {background:red

} .default {background:red

}

VarmyApp=angular.module ('myApp', [])

MyApp

.controller ('Controller', [' $scope',function ($scope) {

$scope.fn=function () {

Alert (11)

}

}])

.directive ('myBtn',function () {return {)

Scope: {

Fn1:'&fn2'

}

Template:''

}

})

This is the end of the article on "how to use the scopel instructions of angular". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use angular's scopel instructions". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.